Ein Überblick über Material-Symbole – wo findest du sie und wie du sie in deine Projekte einbauen kannst.
Was sind Material-Symbole?
Systemsymbole für Material Design sind einfach, modern, freundlich und manchmal eigenartig. Jedes Symbol wird anhand unserer Designrichtlinien erstellt, um die universellen Konzepte, die häufig auf einer Benutzeroberfläche verwendet werden, in einfachen und minimalistischen Formen darzustellen. Diese Symbole wurden für eine optimale Darstellung auf allen gängigen Plattformen und in allen gängigen Bildschirmauflösungen optimiert, damit sie sowohl in großen als auch in kleinen Größen gut lesbar und verständlich sind.
Eine vollständige Liste der Material Design-Symbole findest du in der Material Icons Library.
Symbole abrufen
Die Symbole sind in verschiedenen Formaten verfügbar und eignen sich für verschiedene Arten von Projekten und Plattformen, für Entwickler in ihren Apps und für Designer in Modellen oder Prototypen.
Lizenzierung
Wir stellen Ihnen diese Symbole unter der Apache-Lizenzversion 2.0 zur Verfügung, damit Sie sie in Ihre Produkte einbinden können. Sie können diese Symbole und die Dokumentation in Ihren Produkten neu mischen und erneut teilen. Wir würden uns freuen, wenn Sie die Quellenangaben im about-Bildschirm Ihrer App hinzufügen würden. Dies ist jedoch nicht erforderlich.
Durchsuchen und Herunterladen einzelner Symbole
Alle Materialsymbole finden Sie in der Materialsymbolbibliothek. Die Symbole können als SVG oder PNG heruntergeladen werden. Das Format eignet sich für Web-, Android- und iOS-Projekte und kann in Designertools eingefügt werden.
Alles wird heruntergeladen
Nutzen Sie die aktuelle stabile ZIP-Datei (ca. 310 MB) aller Symbole oder die moderne Version vom Master.
Git-Repository
Die Materialsymbole sind im Git-Repository verfügbar, das den vollständigen Satz von Symbolen einschließlich aller verschiedenen Formate enthält, die wir zur Verfügung stellen.
$ git clone https://github.com/google/material-design-icons/
Symbolschrift für das Web
Die Schriftart für Materialsymbole ist die einfachste Methode, um Materialsymbole in Webprojekte einzubinden. Wir haben alle Symbole aus dem Material in einer einzigen Schriftart gepackt, die die typografischen Rendering-Funktionen moderner Browser nutzt, damit Webentwickler diese Symbole mit nur wenigen Codezeilen problemlos einbinden können.
Die Verwendung der Schriftart ist nicht nur die bequemste Methode, sondern auch effizient und sieht toll aus:
- Mehr als 900 Symbole in einer einzigen, kleinen Datei.
- Sie kann von Google Web Font-Servern bereitgestellt oder selbst gehostet werden.
- Diese Option wird von allen modernen Webbrowsern unterstützt.
- Farben, Größen und Positionierungen werden ausschließlich mit CSS erstellt.
- Vektorbasiert: Sieht gut in jeder Größenordnung, Retina-Displays und Low-DPI-Displays aus.
Die Symbolschriftart beträgt in ihrem kleinsten WOFF2-Format nur 42 KB und im Standard-Woff-Format 56 KB. Im Vergleich dazu sind die mit gzip komprimierten SVG-Dateien in der Regel etwa 62 KB groß. Dies lässt sich jedoch erheblich reduzieren, wenn Sie nur die benötigten Symbole zu einer einzelnen SVG-Datei mit Symbol-Sprites kompilieren.
Einrichtungsmethode 1. Über Google Fonts verwenden
Am einfachsten lassen sich Symbolschriftarten für die Verwendung auf Webseiten über Google Fonts einrichten. Sie müssen lediglich eine einzelne HTML-Zeile einfügen:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Ähnlich wie bei anderen Google Web Fonts wird das richtige CSS bereitgestellt, um die browserspezifische Schriftart „Material Icons“ zu aktivieren.
Eine zusätzliche CSS-Klasse mit dem Namen .material-icons wird deklariert.
Jedes Element, das diese Klasse verwendet, hat das richtige CSS, um diese Symbole aus der Webschriftart zu rendern.
Einrichtungsmethode 2. Selbsthosting
Für diejenigen, die die Webschriftart selbst hosten möchten, sind einige zusätzliche Einrichtungsschritte erforderlich.
Hosten Sie die Symbolschrift an einem Ort, z. B. https://example.com/material-icons.woff, und fügen Sie die folgende CSS-Regel hinzu:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
Außerdem müssen die CSS-Regeln für das Rendering des Symbols deklariert werden, damit die Schriftart richtig gerendert wird. Diese Regeln werden normalerweise als Teil des Google Web Font-Stylesheets bereitgestellt, müssen jedoch manuell in Ihre Projekte eingefügt werden, wenn Sie die Schriftart selbst hosten:
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
Symbole in HTML verwenden
Sie können Symbole ganz einfach in Ihre Webseite einbinden. Hier ein kleines Beispiel:
Gesicht
<span class="material-icons">face</span>
In diesem Beispiel wird eine typografische Funktion namens Ligaturen verwendet. Damit können Glyphen einfach anhand ihres Textnamens gerendert werden. Die Ersetzung erfolgt automatisch durch den Webbrowser und liefert besser lesbaren Code als der entsprechende numerische Zeichenverweis.
Diese Funktion wird in den meisten modernen Browsern auf Computern und Mobilgeräten unterstützt.
| Browser | Version, die Ligaturen unterstützt |
|---|---|
| Google Chrome | 11 |
| Mozilla Firefox | 3.5 |
| Apple Safari | 5 |
| Microsoft Internet Explorer | 10 |
| Microsoft Edge | 18 |
| Opera | 15 |
| Apple MobileSafari | iOS 4.2 |
| Android-Browser | 3.0 |
Bei Browsern, die Ligaturen nicht unterstützen, verwenden Sie stattdessen numerische Zeichenreferenzen wie im folgenden Beispiel, um die Symbole anzugeben:
<span class="material-icons"></span>Die Symbolnamen und die Codepunkte finden Sie in der Materialsymbolbibliothek. Wählen Sie dazu ein Symbol aus und öffnen Sie das Steuerfeld für Symbolschriftarten. Jede Symbolschrift hat einen Codepoint-Index in unserem Git-Repository, in dem der vollständige Satz von Namen und Zeichencodes (hier) angezeigt wird.
Symbole in Material Design gestalten
Diese Symbole entsprechen den Material Design-Richtlinien und sehen in den empfohlenen Symbolgrößen und -farben am besten aus. Mithilfe der folgenden Stile lassen sich die von uns empfohlenen Größen, Farben und Aktivitätsstatus einfach anwenden.
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
Größen
Auch wenn die Symbole in der Schriftart in Übereinstimmung mit den Richtlinien für Material Design-Symbole auf jede beliebige Größe skaliert werden können, empfehlen wir, sie mit 18, 24, 36 oder 48 Pixeln anzuzeigen. Die Standardeinstellung ist 24 Pixel.
CSS-Regeln für die standardmäßigen Größenrichtlinien von Material Design:
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
Materialisierte Symbole sehen am besten mit 24 Pixeln aus, aber wenn ein Symbol in einer anderen Größe angezeigt werden soll, können die obigen CSS-Regeln hilfreich sein:
<span class="material-icons md-18">face</span><span class="material-icons md-24">face</span><span class="material-icons md-36">face</span><span class="material-icons md-48">face</span>Ausmalen
Die Verwendung der Symbolschrift ermöglicht eine einfache Gestaltung eines Symbols in einer beliebigen Farbe. Gemäß den Richtlinien für Material Design empfehlen wir für aktive Symbole, entweder Schwarz mit einer Deckkraft von 54% oder Weiß mit 100% Deckkraft zu verwenden, wenn sie auf hellem oder dunklem Hintergrund angezeigt werden. Wenn ein Symbol deaktiviert oder inaktiv ist, wird Schwarz mit 26% oder Weiß mit 30% für hellen bzw. dunklen Hintergrund verwendet.
Hier sind einige Beispiele, in denen die oben beschriebenen CSS-Stile verwendet werden:
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
Beispiel für das Zeichnen eines Symbols auf hellem Hintergrund mit dunkler Vordergrundfarbe:
<span class="material-icons md-dark">face</span><span class="material-icons md-dark md-inactive">face</span>Beispiel für das Zeichnen eines Symbols auf dunklem Hintergrund mit heller Farbe im Vordergrund:
<span class="material-icons md-light">face</span><span class="material-icons md-light md-inactive">face</span>Um eine benutzerdefinierte Symbolfarbe festzulegen, definieren Sie eine CSS-Regel, die die gewünschte Farbe für die Schriftart angibt:
.material-icons.orange600 { color: #FB8C00; }
und verwenden Sie dann die Klasse, wenn Sie auf das Symbol verweisen:
<span class="material-icons orange600">face</span>Symbolbilder für das Web
Materialsymbole sind auch als normale Bilder verfügbar, sowohl im PNG- als auch im SVG-Format.
SVG
Die Materialsymbole werden als SVG-Dateien zur Verfügung gestellt, die für Webprojekte geeignet sind. Die einzelnen Symbole können aus der Materialsymbolbibliothek heruntergeladen werden. Die SVGs sind auch über die Material Design-Symbole git repository unter dem Pfad verfügbar:
material-design-icons/src/
Symbole für Karten befinden sich beispielsweise in src/maps:
material-design-icons/src/maps/
Wenn auf einer Website mehrere Symbole verwendet werden, empfiehlt es sich, Sprite Sheets aus den Bildern zu erstellen. Weitere Informationen finden Sie in der Dokumentation im Sprites-Verzeichnis des Git-Repositorys.
PNG
PNG ist die gängigste Methode zum Anzeigen von Symbolen im Web. Unsere Downloads aus der Bibliothek für Materialsymbole bieten sowohl eine einfache als auch eine doppelte Dichte für jedes Symbol. Sie werden im Download als 1x bzw. 2x bezeichnet. Symbole finden Sie auch im Git-Repository unter:
material-design-icons/png/
Wenn auf einer Website mehrere Symbole verwendet werden, empfiehlt es sich, Sprite Sheets aus den Bildern zu erstellen. Weitere Informationen finden Sie in den Empfehlungen im Sprites-Verzeichnis im Git-Repository.
Symbole für Android
Für Android geeignete PNGs sind in der Materialsymbolbibliothek verfügbar. Diese funktionieren in allen unterstützten Bildschirmdichten und sollten daher auf jedem Gerät gut aussehen.
Die Symbole sind auch im Git-Repository Material Design-Symbole in der folgenden Kombination aus Farben und Größen verfügbar:
Vector Drawable ist derzeit nur als schwarzes 24-dp-Symbol verfügbar. Dies ist aus Gründen der Kompatibilität mit unseren gängigsten Standardgrößen von Symbolen erforderlich. Wenn Sie das Symbol in einer anderen Farbe rendern möchten, verwenden Sie die Drawable-Tönung unter Android Lollipop.
Wenn Sie Vector Drawable verwenden, müssen Sie möglicherweise nicht die PNG-Datei mit der xxxhdpi-Dichte hinzufügen, da es unwahrscheinlich ist, dass ein Gerät, das diese Bildschirmdichte unterstützt, Vector Drawables nicht unterstützt.
Symbole für iOS
Material-Symbole funktionieren auch gut in iOS-Apps. Sowohl in der Material Icons Library als auch im Git-Repository sind diese Symbole in Xcode-Imagesets verpackt, die problemlos mit Xcode Asset Catalogs (xcassets) funktionieren. Diese Imagesets können zu jedem Xcode-Asset-Katalog hinzugefügt werden, indem Sie sie in Xcode in den Asset-Katalog ziehen oder den Ordner in den xcasset-Ordner kopieren.
Der Imageset enthält Bilder mit einfacher, doppelter und dreifacher Dichte (1x, 2x, 3x), sodass sie bei allen bekannten iOS-Bildschirmdichten funktionieren. Es stehen sowohl schwarze als auch weiße Symbole zur Verfügung. Wir empfehlen jedoch, imageWithRenderingMode von UIImage mit UIImageRenderingModeAlwaysTemplate zu verwenden, damit das Bild als Alphamaske verwendet werden kann, die in jede mögliche Farbe eingefärbt werden kann.
Objective-C-Beispiel:
UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
[[UIImage imageNamed:@"ic_close"]
imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];
Swift-Beispiel:
let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)
Symbole in linksläufiger Schrift
Sprachen wie Arabisch und Hebräisch werden von rechts nach links gelesen. Bei RTL-Sprachen sollten Benutzeroberflächen so gespiegelt werden, dass die meisten Elemente in RTL angezeigt werden. Wenn eine Benutzeroberfläche für RTL gespiegelt wird, sollten auch einige Symbole gespiegelt werden. Wenn Text, Layout und Symbole gespiegelt werden, um von rechts nach links verlaufende UIs zu unterstützen, sollte alles, was sich auf die Zeit bezieht, so dargestellt werden, als würde es sich von rechts nach links bewegen. Zum Beispiel bedeutet Vorwärts nach links und Rückwärts nach rechts. Denken Sie jedoch daran, dass der Kontext, in dem das Symbol platziert wird, auch beeinflussen kann, ob ein Symbol gespiegelt wird oder nicht.
Symbole sollten nur dann gespiegelt werden, wenn ihre Richtung mit anderen UI-Elementen im RTL-Modus übereinstimmt. Wenn ein Symbol visuelle Merkmale Ihrer Website darstellt, die sich in RTL unterscheiden, sollte das Symbol auch in RTL gespiegelt werden. Wenn sich die Zahlen in einer nummerierten Liste beispielsweise rechts in der RTL-Sprache befinden, sollten sie rechts neben dem gespiegelten Symbol stehen.
Linksläufige Symbole unter Android
In diesem Artikel für Android-Entwickler wird ausführlich beschrieben, wie RTL-Benutzeroberflächen implementiert werden. Auf Android-Geräten werden Symbole standardmäßig nicht gespiegelt, wenn die Layoutrichtung gespiegelt wird. Sie müssen die entsprechenden Symbole bei Bedarf speziell spiegeln, entweder indem Sie spezielle Assets für RTL-Sprachen bereitstellen oder indem Sie die Framework-Funktionen zum Spiegeln der Assets verwenden.
Wenn Sie spezielle Assets für RTL-Sprachen bereitstellen möchten, können Sie den Qualifizierer ldrtl in Ressourcenverzeichnissen wie res/drawable-ldrtl/ verwenden. Ressourcen in solchen Verzeichnissen werden nur für RTL-Sprachen verwendet. Auf Geräten mit Android API 19 oder höher bietet das Framework auch das autoMirrored-Attribut für Drawables. Wenn dieses Attribut auf „true“ gesetzt ist, wird das Drawable automatisch für RTL-Sprachen gespiegelt.
„autoMirrored“ verwenden:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0"
android:tint="?attr/colorControlNormal"
android:autoMirrored="true">
<path
android:fillColor="@android:color/white"
android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>
Wenn die Verwendung von „autoMirrored“ oder die Bereitstellung alternativer Drawable-Ressourcen keine Option ist, kann das ImageView-Attribut „scaleX“ auch zum Spiegeln von Drawables verwendet werden (z. B. durch Bereitstellung eines RTL-spezifischen Layouts in einem res/layout-ldrtl-Verzeichnis).
Spiegelung in der Layoutdatei:
<ImageView
android:id="@+id/my_icon"
android:layout_width="60dp"
android:layout_height="60dp"
android:scaleX="-1" />
Drawables können außerdem programmatisch gespiegelt werden.
Prüfen Sie die Layoutrichtung manuell mit getLayoutDirection:
if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
// custom code
}
ImageView-Inhalte programmatisch spiegeln:
imageView.setScaleX(-1);
Linksläufige Symbole unter iOS
iOS verwendet das Konzept eines UISemanticContentAttribute, das jeder Ansicht zugeordnet ist. Das kann unspecified, forceLeftToRight, forceRightToLeft, playback oder spatial sein. iOS verwendet diesen Wert und die Einstellung (left-to-right (LTR)/RTL des Geräts, auf dem die Schnittstelle angezeigt wird, um die effektiveLayoutDirection) der Ansicht zu bestimmen. Mit „effectiveLayoutDirection“ wird festgelegt, ob ein Bild bei der Anzeige gespiegelt wird oder nicht.
Standardmäßig ist der semantische Inhalt von Bildern auf unspecified festgelegt. Dadurch werden sie im RTL-Modus gespiegelt. Wenn ein Symbol nicht immer gespiegelt werden soll, müssen Sie es explizit auf forceLeftToRight setzen. Apple weist auf einige Ausnahmen hin, die nicht gespiegelt werden sollten, z. B. die Medienwiedergabe (Vorspulen, Zurückspulen usw.), Musiknoten, Bilder, die das Verstreichen der Zeit angeben.
Objective-C-Beispiel:
// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
UISemanticContentAttributeForceLeftToRight;
Swift-Beispiel:
// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;
Ausführlichere Informationen zur Implementierung von RTL unter iOS und macOS finden Sie in der Rechts-Links-Dokumentation von Apple.
In iOS 9 wurden semantische Inhalte hinzugefügt. Wenn Sie frühere Versionen von iOS unterstützen, werden einige der Funktionen im Framework zur Internationalisierung von Material auf iOS 8 zurückportiert.
Linksläufige Symbole im Web
Wir empfehlen den folgenden Artikel als Orientierungshilfe für RTL im Web: https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2
Standardmäßig werden Symbole im Web nicht gespiegelt, wenn die Layoutrichtung gespiegelt wird. Sie müssen die entsprechenden Symbole bei Bedarf explizit spiegeln.
Das folgende Beispiel zeigt, wie eine einfache RTL-CSS-Regel implementiert wird. Sie können es sich auch in Codepen ansehen.
page.html
<html dir="rtl">
<img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>
page.css
html[dir="rtl"] .icon {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Mit ImageMagick eigene RTL-Symbole erstellen
Wenn Sie die Symbole nicht im Code spiegeln können, verwenden Sie ImageMagick, um das Bild horizontal zu spiegeln.
convert -flop my_icon.png my_icon_rtl.png
Welche Symbole sollten für RTL gespiegelt werden?
Im Folgenden finden Sie eine Liste von Symbolen, die programmatisch nach linksläufig gespiegelt werden können:
| Zurückpfeil () | -Pfeil zurück (iOS) | Vorwärtspfeil |
| -Pfeil vorwärts iOS | Pfeil nach links: | Pfeil nach rechts: |
| Aufgabe | Rückgabe der Aufgabe "" | Rücktaste |
| Akkustand von unbekannt | Anruf getätigt | -Anrufzusammenführung |
| Anruf verpasst | Anruf verpasst (ausgehend) | Anruf erhalten |
| Anrufaufteilung | Chevron von nach links | Chevron nach rechts: |
| Chrome Reader-Modus „“ | unbekanntes Gerät | DVR |
| Terminnotiz | Empfohlene Playlist für | Angesagtes Video von |
| erste Seite | Landung von | Start des Flugs mit |
| Verkleinerung des Formateinzugs um | Einzug von Format erhöhen | Formatliste mit Aufzählungszeichen „“ |
| weiter | -Funktionen | Eingabe für |
| Tab „“ auf der Tastatur | Label | Label wichtig |
| Labelstruktur für | letzte Seite | Start |
| Liste | -Live-Hilfe | mobile Bildschirmfreigabe |
| Mehrliniendiagramm „“ | vorwärts navigieren | – weiter |
| Nächste Woche um | Notiz | in neuem Fenster öffnen |
| Playlist hinzufügen | Musik in der Wiedergabeliste | wiederholen |
| Antwort | – Allen antworten | Bildschirmfreigabe |
| senden | kurzer Text | – Diagramm anzeigen |
| Sortierung: | Stern (Hälfte) | Betreff |
| im Trend | Inhalt | Abwärtstrend von „“ |
| Aufwärtstrend von | Rückgängig machen | Liste ansehen |
| Quilt ansehen | Zeilenumbruch: |