Was sind materielle Symbole?
Materialsymbole sind unsere neuesten Symbole mit über 2.500 Glyphen in einer eine Schriftartdatei mit einer Vielzahl von Designvarianten erstellen. Symbole sind verfügbar in drei Stile und vier anpassbaren variablen Schriftachsen (Füllung, Stärke, Farbgrad und optische Größe). Die vollständige Auswahl der Material-Symbole finden Sie in der Material Symbols Library.
FILL-Achse
Mit der Füllung können Sie den Standardstil des Symbols ändern. Ein einzelnes Symbol kann sowohl nicht gefüllte als auch gefüllte Zustände zu rendern.
Um einen Zustandsübergang zu vermitteln, verwenden Sie die Füllachse für Animation oder Interaktion. Die Werte sind „0“ für den Standardwert oder „1“ für „vollständig ausgefüllt“. Zusammen mit dem Gewicht wirkt sich die Füllung auch auf das Aussehen des Symbols aus.
wght-Achse
Weight (Gewichtung) definiert die Strichstärke des Symbols, mit einem Gewichtsbereich zwischen dünn (100) und fett (700). Die Gewichtung kann sich auch auf die Gesamtgröße .
GRAD-Achse
Gewicht und Grad wirken sich auf die Stärke eines Symbols aus. Notenanpassungen und haben nur geringe Auswirkungen auf die Größe der das Symbol.
Die Note ist auch in einigen Textschriftarten verfügbar. Sie können Niveaustufen zwischen Text und Symbole für einen harmonischen visuellen Effekt. Wenn zum Beispiel die Schriftart eine -25-Note hat, können Sie die Symbole einem geeigneten Wert zuordnen, z. B. -25.
Sie können die Note für verschiedene Anforderungen verwenden:
Geringe Hervorhebung (z. B. -25): Damit werden Blendeffekte bei einem hellen Symbol bei Dunkelheit reduziert. und verwenden Sie einen schlechten Farbton.
Starke Hervorhebung (z. B. Stufe 200): Wenn Sie ein Symbol hervorheben möchten, erhöhen Sie die positive Bewertung. benoten.
opsz-Achse
Optische Größen reichen von 20 dp bis 48 dp.
Damit das Bild in verschiedenen Größen gleich aussieht, muss die Strichstärke (Dicke) mit zunehmender Größe des Symbols. Mit der optischen Größe können Sie die Strichstärke anpassen, wenn Sie die Symbolgröße erhöhen oder verringern.
Materialisierte Symbole beziehen
Materialsymbole sind in verschiedenen Formaten verfügbar und eignen sich für verschiedene Projekt- und Plattformtypen sowohl für Entwickler in ihren Apps als auch für Designschaffenden in ihren Modellen oder Prototypen.
Lizenzierung
Material Design-Symbole finden Sie in der Apache License Version 2.0
Einzelne Symbole durchsuchen und herunterladen
Der vollständige Satz der Material-Symbole ist im Material Symbols Library (Material Symbolbibliothek) im SVG- oder PNG-Format. Sie sind für die Web-, Android- und iOS-Geräte sowie alle und Design-Tools.
Git-Repository
Die Git-Repository enthält den vollständigen Satz der Materialsymbole im SVG-Format.
$ git clone https://github.com/google/material-design-icons
Material Design-Symbole verwenden
Im Web verwenden
Die Schriftart Material Symbols ist die einfachste Möglichkeit, Material Symbols zu integrieren. in Webprojekte zu verwandeln.
Die Symbole werden in eine einzige Schriftart gepackt, damit Webentwickler diese Symbole mit nur wenigen Codezeilen zu integrieren.
Statische Schriftart mit Google Fonts
Am einfachsten lassen sich Symbolschriftarten zur Verwendung auf jeder Webseite über Google Fonts: Fügen Sie diese HTML-Zeile hinzu:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
Das obige Snippet enthält die Standardkonfiguration Achse, mit weight bei 400, optische Größe mit 48, Note bei 0 und Füllung (auch 0.)
Verwenden Sie die Methode Fonts CSS API um verschiedene Achsenwerte zu konfigurieren. Sehen Sie sich die folgenden Beispiele an:
<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">Variable Schriftart mit Google Fonts
Wenn Sie Symbole über CSS animieren oder die Symbolfunktionen genauer steuern möchten, verwenden Sie
die Schriftart der Variablen
für Google-Symbole verwenden. Mithilfe von Bereichen im Format number..number
können wir die gesamte Schriftart der Variablen laden. Zur Kasse
Kann ich die Unterstützung für variable Schriftarten verwenden?
um herauszufinden, ob Ihre Nutzer
die Schriftart der Variablen laden können,
die Wahrscheinlichkeit, dass sie es sind. Beispiele:
Oder animieren Sie sie sogar!
<ph type="x-smartling-placeholder">Schriftart selbst hosten
Hosten Sie die
Schriftart des Symbols
an einem von Ihnen festgelegten Ort, um zu entscheiden, wann das Asset aktualisiert werden soll. Für
Beispiel: Wenn die URL https://example.com/material-symbols.woff lautet, fügen Sie den Parameter
folgenden CSS-Regel:
@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, müssen Sie die CSS-Regeln für das Rendern des Symbols deklarieren. Diese werden normalerweise als Teil des Google Fonts API-Stylesheets bereitgestellt, müssen beim Selfhosting 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
, mit dem eine Symbolglyphe ganz einfach durch die Verwendung ihres Textnamens gerendert werden kann. Die
ersetzt die Textligatur automatisch durch den Symbolvektor und
bietet besser lesbaren Code als den entsprechenden numerischen Zeichenverweis. Für
Im HTML-Code steht arrow_forward für ein Symbol,
statt . Verwenden Sie für andere Symbole die in Snake Case-Methode angegebene Schreibweise des Symbolnamens
Ersetzen Sie beispielsweise Leerzeichen durch Unterstriche.
Diese Funktion wird von den meisten modernen Browsern sowohl auf Desktop-Computern als auch auf Mobilgeräten unterstützt. Geräte. Weitere Informationen finden Sie unter Kann ich die Ligaturenunterstützung von Google verwenden? ob Ihre Nutzer Ligaturen verarbeiten können, höchstwahrscheinlich können.
Falls Sie Browser unterstützen müssen, die keine Ligaturen unterstützen, geben Sie Symbole mit numerischen Zeichenverweisen (auch Codepunkte genannt) wie im Beispiel unten:
<ph type="x-smartling-placeholder">Suchen Sie sowohl die Symbolnamen als auch die Codepunkte auf dem Material Symbols Library indem Sie ein beliebiges Symbol auswählen und das Steuerfeld für Symbolschriften öffnen. Jede Symbolschrift hat ein Codepoints-Index in der Google Fonts- Git-Repository der alle Namen und Zeichencodes enthält.
Symbole in Material Design gestalten
Diese Symbole folgen dem Material Design-Richtlinien und sie sehen am besten mit den empfohlenen Symbolgrößen und -farben aus. Die Stile unten können Sie die empfohlenen Größen, Farben und Aktivitätsstatus ganz einfach anwenden.
<ph type="x-smartling-placeholder">In Android verwenden
In der Material Symbols Library liegen alle Symbole im Format „Vector Drawable“ vor. Bis finden Sie in der Dokumentation zu Android Vector Asset Studio
In iOS verwenden
Die Symbole sind auch im Apple Symbols-Format verfügbar. Wenn Sie mehr darüber erfahren möchten, finden Sie die offiziellen Apple Symbols Übersicht und Verwendungsanleitung.
In Flutter verwenden
Die Flutter-Unterstützung für Material Symbols ist geplant. Wir halten dich über Updates auf dem Laufenden.