Was viele nicht wissen: Der Google-Fonts-Katalog enthält nicht nur Schriften, sondern auch eine ausgewachsene Icon-Bibliothek. Material Symbols ist die offizielle Open-Source-Icon-Schrift Googles — verfügbar in drei Stilen (Outlined, Rounded, Sharp) und mit über 3.000 Glyphen als Variable Font.
Was Material Symbols von klassischen Icon-Sets unterscheidet
Klassische Icon-Sets sind statisch: ein Glyph, eine Strichstärke, eine Größe. Material Symbols ist eine echte Variable Font mit vier Achsen:
- Weight (100–700): Strichstärke der Icons, fein abstufbar.
- Fill (0/1): Outlined oder gefülltes Icon, animierbar zwischen den beiden Zuständen.
- Grade (-25 bis 200): Feinjustierung der Stärke ohne die Größe der Glyphen zu ändern — wichtig für dunkle Backgrounds.
- Optical Size (20/24/40/48): unterschiedliche Optimierung für kleine vs. große Darstellung.
Praktische Einbindung
Klassisch via API:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
<span class="material-symbols-outlined">settings</span>Aber Achtung: Die Variable-Font-Datei mit allen 3.000+ Icons ist groß (über 300 KB). Für Production-Setups lohnt sich das Subset-Pattern — du listest die tatsächlich genutzten Icon-Namen im URL auf, Google liefert dann nur diese Glyphen aus:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=settings,delete,search,menu" rel="stylesheet">Lokal hosten ist auch hier möglich
Genau wie bei den Text-Schriften liegen die Material-Symbols-Dateien im offiziellen GitHub-Repo (github.com/google/material-design-icons). Wer den DSGVO-Konflikt mit fonts.googleapis.com vermeiden will, kann die Variable-Datei oder die SVG-Variante einfach mitliefern. Bei der Variable-Font-Variante sollte man unbedingt das Subset-Pattern nachbauen — etwa über einen Build-Step, der nur die tatsächlich verwendeten Glyphen extrahiert.
Consenta v1.13 erkennt auch Material-Symbols-Aufrufe an fonts.googleapis.com und biegt sie auf das lokale Pendant um, sofern die Schrift im Katalog vorhanden ist.
Alternativen, falls Material nicht passt
Material Symbols hat eine sehr klare Designsprache, die nicht zu jedem Brand passt. Sinnvolle Alternativen mit ähnlicher Lizenz-Klarheit:
- Lucide — fork von Feather Icons, sehr aktiv gepflegt, MIT-Lizenz.
- Heroicons — vom Tailwind-Team, MIT-Lizenz.
- Phosphor Icons — sechs Varianten pro Icon, MIT-Lizenz.
Diese drei werden meist als SVG-Bibliothek eingebunden und vermeiden den Font-Loading-Schritt komplett — was sowohl performance- als auch datenschutz-technisch eine saubere Lösung ist.
Drittdienste auch nach der Schrift-Umstellung sauber blocken
Lokale Schriften lösen das Schrift-Problem. Karten, Videos, Marketing-Pixel und Page-Builder schaffen morgen die nächste Lücke. Mit Consenta blockst du nicht-essentielle Drittdienste automatisch — bis zur Einwilligung.