Was sind Materialsymbole?
Material Symbols sind unsere neuesten Symbole. Sie enthalten über 2.500 Glyphen in einer einzigen Schriftdatei mit einer Vielzahl von Designvarianten. Symbole sind verfügbar in drei Stile und vier anpassbaren variablen Schriftachsen (Füllung, Stärke, Farbgrad und optische Größe). Die vollständigen Material Symbols 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 ohne als auch mit Füllung gerendert werden.
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. Neben der Gewichtsachse wirkt sich auch die Füllung auf das Aussehen des Symbols aus.
wght-Achse
Mit „Weight“ (Stärke) wird die Strichstärke des Symbols definiert. Die Auswahlmöglichkeiten reichen von „thin“ (dünn, 100) bis „bold“ (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. Anpassungen der Neigung sind detaillierter als Anpassungen des Gewichts und haben nur geringe Auswirkungen auf die Größe des Symbols.
Die Note ist auch in einigen Textschriftarten verfügbar. Sie können die Schriftschnitte von Text und Symbolen aufeinander abstimmen, um einen harmonischen visuellen Effekt zu erzielen. 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 dunklen Lichtverhältnissen reduziert. einen schlechten Farbton aus.
Hohe Betonung (z. B. 200 Grad): Wenn Sie ein Symbol hervorheben möchten, erhöhen Sie den positiven Grad.
opsz-Achse
Die optische Größe kann zwischen 20 dp und 48 dp liegen.
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 lässt sich die Strichstärke automatisch anpassen, wenn Sie die Symbolgröße erhöhen oder verringern.
Materialisierte Symbole beziehen
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 Designer in ihren Mockups oder Prototypen.
Lizenzierung
Material Design-Symbole sind in der Apache-Lizenzversion verfügbar. 2,0 .
Einzelne Symbole suchen und herunterladen
Der vollständige Satz der Materialsymbole ist unter Material Symbols Mediathek im SVG- oder PNG-Format. Sie eignen sich für Web, Android und iOS sowie 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
Materialsymbole verwenden
Im Web verwenden
Die Schriftart Material Symbols ist die einfachste Möglichkeit, Material Symbols zu integrieren. in Webprojekte zu verwandeln.
Die Symbole sind in einer einzigen Schriftart verpackt, damit Webentwickler diese Symbole ganz einfach mit nur wenigen Codezeilen einbinden können.
Statische Schriftart mit Google Fonts
Am einfachsten lassen sich Symbolschriftarten zur Verwendung auf Webseiten mithilfe von Google Schriftarten: Einschließlich HTML-Codezeile:
<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, optisch Größe mit 48, Note bei 0 und Füllung (auch 0.)
Verwenden Sie die Fonts CSS API, um verschiedene Achsenwerte zu konfigurieren. Sehen Sie sich die folgenden Beispiele an:
Variable Schriftart mit Google Fonts
Wenn Sie Symbole über CSS animieren oder die Symbolfunktionen genauer steuern möchten, verwenden Sie die variable Schriftart „Google Symbols“. Mithilfe von Bereichen im Format number..number können wir die gesamte variable Schriftart laden. Unter Can I Use's Variable Fonts
Support
um herauszufinden, ob Ihre Nutzer
die Schriftart der Variablen laden können,
die Wahrscheinlichkeit, dass sie es sind. Hier einige Beispiele:
Oder animieren Sie sie sogar!
Symbolschriftart optimieren
Mit dem Abfrageparameter
&icon_nameskönnen Sie die Schriftart so eingrenzen, dass nur die für Ihre Anwendung relevanten Symbole enthalten sind. Verwenden Sie dazu eine alphabetisch sortierte, durch Kommas getrennte Liste von Symbolnamen (Ligaturen).Nicht empfohlen: Bei Verwendung der Standardeinstellungen werden alle über 3.800 Symbole geladen. Schriftnutzlast: 295 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+OutlinedEmpfohlen: Wenn Sie Symbolnamen angeben, werden nur die erforderlichen Symbole geladen. Schriftnutzlast: 1,7 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=blockInstanz der Schriftartachsen so konfigurieren, dass nur die in Ihrer Anwendung berücksichtigt werden verwendet. Die meisten Anwendungen benötigen nur wenige Variationen der Achsen.
Nicht empfohlen: Wenn die Konfiguration für Achsen fehlt, wird die Statische Standardschrift (Gewichtung 400, optische Größe 24, rund 50, Grad 0, Füllung 0). Das vollständige Einschließen aller variablen Schriftachsen ist in der Regel unnötig und erhöht den Payload. Schriftnutzlast: 7.9 MB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100Empfohlen: Es wird eine spezifische Kombination von Achsen verwendet. Die vollständige "FILL" axis liefert CSS-Übergänge zwischen Zuständen und 'ROND'. 100 ist ausgewählt. Design. Schriftnutzlast: 2,6 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
Schriftart selbst hosten
Hosten des Symbols
Schriftart
an einem von Ihnen festgelegten Ort, 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');
}
Deklarieren Sie die CSS-Regeln für das Rendern des Symbols, damit die Schrift richtig gerendert wird. 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
, wodurch ein Symbolsymbol unter Verwendung seines Textnamens gerendert werden kann. Der Webbrowser ersetzt die Textligatur automatisch durch den Symbolvektor und bietet einen besser lesbaren Code als die entsprechende numerische Zeichenreferenz. In Ihrem HTML-Code wird beispielsweise arrow_forward anstelle von  für ein Symbol verwendet. Verwenden Sie für andere Symbole den Kamel-Case des Symbolnamens (d. h. ersetzen Sie Leerzeichen durch Unterstriche).
Diese Funktion wird in den meisten modernen Browsern sowohl auf Computern als auch auf Mobilgeräten unterstützt. Weitere Informationen hierzu finden Sie im Abschnitt Kann ich Ligaturen verwenden? Support ob Ihre Nutzer Ligaturen verarbeiten können, höchstwahrscheinlich können.
Wenn Sie Browser unterstützen müssen, die keine Ligaturen unterstützen, geben Sie die Symbole mithilfe numerischer Zeichenreferenzen (auch als Codepunkte bezeichnet) an, wie im Beispiel unten:
Suchen Sie sowohl die Symbolnamen als auch Codepunkte auf dem Tab Material Symbols Mediathek indem Sie ein beliebiges Symbol auswählen und das Steuerfeld für Symbolschriften öffnen. Jede Symbolschriftart hat einen Codepunktindex im Git-Repository von Google Fonts, der die vollständigen Namen und Zeichencodes enthält.
Symbole in Material Design gestalten
Diese Symbole entsprechen dem Material Design Richtlinien, und sie sehen am besten mit den empfohlenen Symbolgrößen und -farben aus. Mit den folgenden Stilen können Sie die von uns empfohlenen Größen, Farben und Aktivitätsstatus ganz einfach anwenden.
In Android verwenden
In der Material Symbols Library sind alle Symbole im Vector Drawable-Format. Bis Weitere Informationen finden Sie im Android Vector Asset Studio Dokumentation.
In iOS verwenden
Die Symbole sind auch im Apple Symbols-Format verfügbar. Weitere Informationen finden Sie in der offiziellen Übersicht und den Nutzungshinweisen für Apple-Symbole.
In Flutter verwenden
Die Flutter-Unterstützung für Material Symbols ist geplant. Wir halten dich über Updates auf dem Laufenden.