Was sind Materialsymbole?
Material Symbols sind unsere neuesten Symbole, die mehr als 2.500 Glyphen in einer einzigen Schriftartdatei mit einer Vielzahl von Designvarianten konsolidieren. Symbole sind in drei Stilen und vier anpassbaren, variablen Schriftachsen (Füllung, Gewicht, Gradation und optische Größe) verfügbar. Eine vollständige Übersicht der Materialsymbole finden Sie in der Material Symbols Library.
FILL Achse
Mit der Füllung können Sie den Standardsymbolstil ändern. Durch ein einzelnes Symbol können sowohl nicht gefüllte als auch gefüllte Symbole dargestellt werden.
Um einen Zustandsübergang zu vermitteln, verwenden Sie die Füllachse für Animation oder Interaktion. Die Werte sind 0 (Standardwert) oder 1 (vollständig gefüllt). Zusammen mit der Gewichtsachse beeinflusst die Füllung auch das Aussehen des Symbols.
wght Achse
Die Gewichtung definiert die Strichstärke des Symbols. Die Gewichtung reicht von dünn (100) bis fett (700). Die Gewichtung kann sich auch auf die Gesamtgröße des Symbols auswirken.
GRAD Achse
Gewicht und Grad haben Einfluss auf die Stärke eines Symbols. Anpassungen des Grades sind detaillierter als Gewichtsanpassungen und haben nur geringe Auswirkungen auf die Größe des Symbols.
Die Note ist auch für einige Textschriftarten verfügbar. Das Niveau von Text und Symbolen sorgt für einen harmonischen visuellen Effekt. Wenn die Schriftart den Wert -25 hat, kann dem Symbol ein geeigneter Wert zugewiesen werden, z. B. -25.
Sie können Noten für unterschiedliche Anforderungen verwenden:
Niedrige Hervorhebung (z.B. Grad -25): Verwenden Sie einen niedrigen Farbton, um Blendeffekte bei einem hellen Symbol auf dunklem Hintergrund zu reduzieren.
Hohe Betonung (z.B. Note 200): Um ein Symbol hervorzuheben, erhöhen Sie die positive Note.
opsz Achse
Die optischen Größen reichen von 20 dp bis 48 dp.
Damit das Bild in verschiedenen Größen gleich aussieht, ändert sich die Strichstärke (Dicke) mit der Skalierung der Symbolgröße. Mithilfe der optischen Größe kann die Strichstärke automatisch angepasst werden, wenn Sie die Symbolgröße vergrößern oder verkleinern.
Materialsymbole abrufen
Material Symbols sind in verschiedenen Formaten verfügbar und eignen sich für verschiedene Arten von Projekten und Plattformen, sowohl für Entwickler in ihren Apps als auch für Designschaffende in ihren Modellen oder Prototypen.
Lizenzierung
Material Symbols sind unter Apache License Version 2.0 verfügbar.
Durchsuchen und Herunterladen einzelner Symbole
Der vollständige Satz von Materialsymbolen ist in der Material Symbols Library im SVG- oder PNG-Format verfügbar. Sie sind für das Web, Android und iOS oder mit beliebigen Designtools geeignet.
Git-Repository
Das Git-Repository enthält den vollständigen Satz von Material Symbols im SVG-Format.
$ git clone https://github.com/google/material-design-icons
Verwendung von Materialsymbolen
Im Web verwenden
Die Schriftart „Material Symbols“ ist die einfachste Möglichkeit, Material Symbols in Webprojekte einzubinden.
Die Symbole sind in einer einzigen Schriftart gepackt, damit Webentwickler diese Symbole mit nur wenigen Codezeilen problemlos einbinden können.
Statische Schriftart mit Google Fonts
Am einfachsten lassen sich Symbolschriftarten für die Verwendung auf Webseiten über Google Fonts einrichten. Fügen Sie diese einzelne HTML-Zeile ein:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
Das Snippet oben enthält die Standardkonfiguration für jede Achse mit einem Gewicht von 400, einer optischen Größe von 48, einem Grad-Wert von 0 und einer Füllung (ebenfalls 0).
Mit der Fonts CSS API können Sie verschiedene Achsenwerte konfigurieren. Sehen Sie sich die folgenden Beispiele an:
Variable Schriftart mit Google Fonts
Wenn Sie Symbole über CSS animieren oder Symbolfunktionen genauer steuern möchten, können Sie die Schriftart der Variablen für Google-Symbole verwenden. Mit Bereichen im Format number..number kann die gesamte Schriftart der Variablen geladen werden. Unter "Can I Use" Variable Fonts-Unterstützung erfahren Sie, ob Ihre Nutzer in der Lage sind, diese Variable zu laden. Das ist höchstwahrscheinlich der Fall. Beispiele:
oder sogar animieren!
Selbsthosting der Schriftart
Hosten Sie die Symbolschrift an einem Ort, den Sie steuern, um zu entscheiden, wann das Asset aktualisiert werden soll. Wenn die URL beispielsweise https://example.com/material-symbols.woff lautet, fügen Sie die folgende CSS-Regel hinzu:
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
src: url(https://example.com/material-symbols.woff) format('woff');
}
Damit die Schriftart richtig gerendert wird, sollten Sie die CSS-Regeln für das Rendering des Symbols deklarieren. Diese Regeln werden normalerweise als Teil des Stylesheets der Google Fonts API bereitgestellt, müssen jedoch beim Selbsthosting manuell in Ihre Projekte eingefügt werden:
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
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;
}
Symbole in HTML verwenden
In den obigen Beispielen wird ein typografisches Merkmal namens Ligaturen verwendet, mit dem ein Symbolsymbol ganz einfach anhand seines Textnamens gerendert werden kann. Der Webbrowser ersetzt die Textligatur automatisch durch den Symbolvektor und liefert besser lesbaren Code als der entsprechende numerische Zeichenverweis. Im HTML-Code wird beispielsweise arrow_forward anstelle von  für ein Symbol verwendet. Verwenden Sie für andere Symbole das Snake Case des Symbolnamens (also ersetzen Sie Leerzeichen durch Unterstriche).
Diese Funktion wird in den meisten modernen Browsern auf Computern und Mobilgeräten unterstützt. Unter Kann ich Ligaturen von Can I Use unterstützen erfahren Sie, ob Ihre Nutzer in der Lage sind, Ligaturen zu verarbeiten, was höchstwahrscheinlich der Fall ist.
Wenn Browser unterstützt werden müssen, die Ligaturen nicht unterstützen, geben Sie die Symbole mithilfe numerischer Zeichenreferenzen (auch Codepunkte genannt) an, wie im folgenden Beispiel:
Sowohl die Symbolnamen als auch die Codepunkte finden Sie in der Material Symbols Library. Wählen Sie dazu ein Symbol aus und öffnen Sie den Bereich mit den Symbolschriftarten. Jede Symbolschrift hat einen Codepunktindex im Git-Repository von Google Fonts, in dem der vollständige Satz von Namen und Zeichencodes angezeigt wird.
Symbole in Material Design gestalten
Diese Symbole entsprechen den Material Design-Richtlinien und sehen am besten aus, wenn sie die empfohlenen Symbolgrößen und -farben verwenden. Mit den Stilen unten lassen sich die empfohlenen Größen, Farben und Aktivitätsstatus ganz einfach anwenden.
In Android verwenden
In der Materialsymbol-Bibliothek liegen alle Symbole im Vector Drawable-Format vor. Weitere Informationen finden Sie in der Dokumentation zu Android Vector Asset Studio.
In iOS verwenden
Die Symbole sind auch im Apple Symbols-Format verfügbar. Weitere Informationen dazu finden Sie in der offiziellen Übersicht und in der Verwendungsanleitung zu Apple Symbols.
In Flutter verwenden
Die Unterstützung von Flutter für Material Symbols ist geplant. Wir halten Sie über Updates auf dem Laufenden.