Google Icons per CSS einbinden: Material Symbols und Material Icons im Vergleich
- Material Symbols oder klassische Material Icons?
- Material Symbols einbinden
- Variable Achsen gezielt verwenden
- Subsetting spart deutlich mehr
- Klassische Material Icons
- Self-Hosting ohne falsches Datenschutzversprechen
- Barrierefreiheit: Das Icon ist nicht die Beschriftung
- Wann SVG besser ist
- Fehlersuche
- Fazit
- Quellen und technische Dokumentation
Material Symbols oder klassische Material Icons?
Google bietet zwei verwandte Icon-Familien als Webfont an. Material Symbols ist das neuere, variable Set mit mehr als 2.500 Symbolen, drei Stilen und einstellbaren Achsen. Material Icons ist der ältere Satz mit festen Varianten. Für neue Projekte sind Material Symbols meist flexibler; bestehende Seiten können Material Icons weiterhin verwenden.
Beide Familien stehen laut Google unter der Apache License 2.0. Die genaue Zahl der Glyphen kann sich ändern. Für eine produktive Seite ist ohnehin entscheidend, welche Icons tatsächlich geladen werden.
Material Symbols einbinden
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
<span class="material-symbols-outlined" aria-hidden="true">home</span>
Der Standardabruf setzt Gewicht 400, optische Größe 48, Grade 0 und Fill 0. Die drei Stilfamilien heißen Material Symbols Outlined, Rounded und Sharp.
Variable Achsen gezielt verwenden
| Achse | Funktion | Bereich laut Google |
|---|---|---|
FILL |
ungefüllt bis gefüllt | 0 bis 1 |
wght |
Strichgewicht | 100 bis 700 |
GRAD |
feinere Dickenanpassung | −50 bis 200 |
opsz |
optische Größe | 20 bis 48 |
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
.icon-filled {
font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}
Der volle Variationsraum ist groß. Google dokumentiert für den vollständigen Abruf mehrere Megabyte; deshalb sollten Achsen und Werte auf den tatsächlichen Bedarf beschränkt werden.
Subsetting spart deutlich mehr
Mit icon_names liefert die CSS-API nur die genannten Ligaturen. Die Namen müssen alphabetisch sortiert und kommasepariert sein:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=block" rel="stylesheet">
Google nennt für dieses Beispiel rund 1,7 KB statt rund 295 KB für den statischen Vollsatz. Diese Werte gehören zum dokumentierten Beispiel und sind keine Garantie für jeden späteren Abruf. display=block verhindert, dass vor dem Laden kurz die Ligaturnamen erscheinen.
Klassische Material Icons
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<span class="material-icons" aria-hidden="true">face</span>
Weitere feste Familien sind unter anderem Material Icons Outlined, Round, Sharp und Two Tone.
Self-Hosting ohne falsches Datenschutzversprechen
Beim externen Abruf verbindet sich der Browser mit Google und übermittelt technisch bedingt die IP-Adresse. Self-Hosting verhindert diese Font-Anfragen an Google, macht die gesamte Website aber nicht automatisch DSGVO-konform. Weitere Dienste, Rechtsgrundlage, Informationspflichten und die konkrete Konfiguration bleiben gesondert zu prüfen.
@font-face {
font-family: "Material Symbols Outlined";
font-style: normal;
src: url("/fonts/material-symbols-outlined.woff2") format("woff2");
}
.material-symbols-outlined {
font-family: "Material Symbols Outlined";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-feature-settings: "liga";
}
Dateiname, Fontformat und font-family müssen zur tatsächlich heruntergeladenen Datei passen. Die Lizenzdatei wird zusammen mit dem Font archiviert.
Barrierefreiheit: Das Icon ist nicht die Beschriftung
Ein dekoratives Icon erhält aria-hidden="true". Ein reiner Icon-Button braucht dagegen einen zugänglichen Namen:
<button type="button" aria-label="Einstellungen öffnen">
<span class="material-symbols-outlined" aria-hidden="true">settings</span>
</button>
Farbe allein darf keinen Zustand vermitteln. Bei interaktiven Symbolen müssen außerdem Fokusdarstellung, Kontrast und Tastaturbedienung stimmen.
Wann SVG besser ist
Einzelne Inline-SVGs oder ein SVG-Sprite vermeiden Ligaturen und laden nur benötigte Formen. Sie bieten häufig bessere Kontrolle über mehrfarbige Darstellung und Barrierefreiheit. Ein Webfont ist praktisch, wenn viele einfarbige Symbole mit identischem CSS-Styling verwendet werden.
Fehlersuche
1. Im Netzwerk-Panel prüfen, ob Stylesheet und Fontdatei geladen werden.
2. Klassenname und Fontfamilie exakt vergleichen.
3. Bei sichtbaren Textnamen font-feature-settings: "liga" und die geladene Datei prüfen.
4. Bei großen Downloads icon_names sowie angeforderte Achsen kontrollieren.
5. Cache leeren, wenn eine lokal ersetzte Fontdatei weiterhin alt erscheint.
Fazit
Material Symbols sind für neue Webprojekte die flexiblere Font-Variante. Subsetting wirkt stärker als pauschales Nachladen des ganzen Satzes. Für wenige Icons oder besonders klare Semantik bleibt SVG oft die einfachere Lösung.
