Übersicht der Materialsymbole

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Was sind Materialsymbole?

Material Symbole sind unsere neuesten Symbole und vereinen über 2.500 Glyphen in einer einzigen Schriftartdatei und mit einer Vielzahl von Designvarianten. Die Symbole sind in drei Stilen und vier einstellbaren variablen Achsen (Füllung, Gewicht, Note und optische Größe) verfügbar. Die vollständigen Satze von Material Symbols findest du in der Material Symbol Library.

FILL Achse

Mit der Funktion „Füllen“ können Sie den Standardstil des Symbols ändern. Mit einem einzelnen Symbol lassen sich sowohl nicht gefüllte als auch gefüllte Status darstellen.

Verwenden Sie die Achse für die Animation oder Interaktion, um einen Zustandsübergang zu ermöglichen. Die Werte sind 0 für die Standardeinstellung oder 1 für vollständig gefüllte Werte. Zusammen mit der Gewichtsachse wirkt sich die Füllung auch auf das Erscheinungsbild des Symbols aus.

wght Achse

Mit der Gewichtung wird das Strichgewicht des Symbols definiert. Der Gewichtsbereich liegt zwischen dünn (100) und fett (700). Die Gewichtung kann sich auch auf die Gesamtgröße des Symbols auswirken.

GRAD Achse

Visualisierung der Notenachse

Gewicht und Note beeinflussen die Stärke eines Symbols. Anpassungen an die Note sind detaillierter als die Anpassung an die Gewichtung. Sie haben einen kleinen Einfluss auf die Größe des Symbols.

Die Note ist auch in einigen Schriftarten verfügbar. Du kannst Grade zwischen Text und Symbolen abgleichen, um einen harmonischen visuellen Effekt zu erzielen. Beispiel: Wenn die Textschrift einen Wert von -25 aufweist, können die Symbole einem geeigneten Wert zugeordnet werden, beispielsweise -25.

Sie können die Note für verschiedene Anforderungen verwenden:

Geringe Hervorhebung (z.B. -25): Verwenden Sie eine niedrige Note, um Blendeffekte auf einem dunklen Symbol zu verringern.

Hohe Hervorhebung (z.B. 200 Grad): Wenn Sie ein Symbol hervorheben möchten, 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) je nach Symbolgröße. Mit der optischen Größe können Sie das Gewicht der Striche automatisch anpassen, wenn Sie das Symbol vergrößern oder verkleinern.

Material Symbole erhalten

Material Symbole stehen in verschiedenen Formaten zur Verfügung und sind für verschiedene Arten von Projekten und Plattformen geeignet, sowohl für Entwickler in ihren Apps als auch für Designer in ihren Modellen oder Prototypen.

Lizenzen

Material Icons sind unter der Apache License Version 2.0 verfügbar.

Einzelne Symbole durchsuchen und herunterladen

Die vollständigen Symbolsymbole findest du in der Bibliothek für Material Symbols im SVG- oder PNG-Format. Sie sind für das Web, Android- und iOS-Geräte oder mit allen Designertools geeignet.

Git-Repository

Das Git-Repository enthält die vollständigen Material Symbole im SVG-Format.

$ git clone https://github.com/google/material-design-icons

Materialsymbole verwenden

Im Web verwenden

Die Schriftart von Material Icons ist die einfachste Möglichkeit, diese Materialien in Webprojekte einzubinden.

Die Symbole werden in einer einzigen Schriftart zusammengefasst, sodass Webentwickler diese Symbole mit nur wenigen Codezeilen einfach einbinden können.

Statische Schriftart mit Google Fonts

Am einfachsten lassen sich Symbolschriftarten für beliebige 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 obige Snippet enthält die Standardkonfiguration für jede Achse mit Gewichtung 400, optischer Größe bei 48, Grad bei 0 und Füllung (auch 0).

Verwende die Fonts CSS API, um verschiedene Achsenwerte zu konfigurieren. Hier ein paar Beispiele:

Variable Schriftart mit Google Fonts

Wenn du Symbole über CSS animieren oder mehr Kontrolle über Symbolfunktionen möchtest, verwende die Schriftart für Google-Symbole. Mit Bereichen im Format number..number können wir die gesamte Schriftgröße der Variablen laden. Unter Kann ich die Variablenschrift unterstützen erfahren Sie, ob Ihre Nutzer die Schrift der Variable laden können. Beispiele:

mit Animationen!

Schriftart selbst hosten

Hoste die Symbolschrift an einem von dir verwalteten Standort, 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, deklarieren Sie die CSS-Regeln zum Rendern des Symbols. Diese Regeln werden normalerweise als Teil des Google Fonts API-Stylesheets bereitgestellt, müssen aber beim Selbsthosting manuell in Ihre Projekte aufgenommen 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 Beispielen oben wird eine typografische Funktion namens Ligaturen verwendet. Damit kann das Symbol auf einem Symbol ganz einfach anhand des Textnamens gerendert werden. Der Webbrowser ersetzt automatisch die Textliga durch den Symbolvektor und bietet lesbarer Code als der entsprechende numerische Zeichenverweis. In deinem HTML-Code beispielsweise wird dann arrow_forward anstelle von &#xE5C8; für ein Symbol angezeigt.

Diese Funktion wird in den meisten modernen Browsern auf Computern und Mobilgeräten unterstützt. Unter Kann ich die Lizenzierung für die Lizenzierung verwenden überprüfen, ob Ihre Nutzer in der Lage sind, sie zu verarbeiten,

Wenn Browser unterstützt werden müssen, die keine Liga-Zeichen unterstützen, gib die Symbole wie im Beispiel unten mithilfe von numerischen Zeichenverweisen (auch Codepunkten) an:

Sie finden die Symbolnamen und -Codepunkte in der Material Symbol Library, indem Sie ein beliebiges Symbol auswählen und den Bereich für die Symbolschrift öffnen. Jede Symbolschrift hat einen Codepunktindex im Git-Repository von Google Fonts, der alle Namen und Zeichencodes zeigt.

Stile für Material Design festlegen

Diese Symbole entsprechen den Material Design-Richtlinien. Sie sehen am besten aus, wenn du die empfohlenen Symbolgrößen und -farben verwendest. Mit den unten angegebenen Stilen lassen sich empfohlene Größen, Farben und Aktivitätsstatus ganz einfach anwenden.

In Android verwenden

Alle Symbole in der Material Symbol Library haben das Format "Vector Drawable". Weitere Informationen findest du in der Dokumentation zu Android Vector Asset Studio.

In iOS verwenden

Die Symbole sind auch im Apple-Symbolformat verfügbar. Informationen zu diesen Symbolen findest du in den offiziellen Apple-Symbolen und im Nutzungsleitfaden.

In Flutter verwenden

Die Flutter-Unterstützung für Materialsymbole ist geplant. Wir halten Sie über Updates auf dem Laufenden.