Icons
Alle Icons stammen aus dem Google-Font "Material Symbols Outlined" und werden über die Icon-Komponente als Ligatur gerendert. Im YAML gibt man immer den technischen Icon-Namen an (z.B. mail), niemals einen Bildpfad. Diese Seite listet alle 56 Icons auf, die aktuell zur Verfügung stehen – jeweils das Icon selbst und daneben den Namen, den man im YAML einträgt.
Schreibweise im YAML
Es gibt zwei Schreibweisen: die Kurzform als einfacher String (icon: mail) und die Objektform mit optionaler Farbe (icon: { name: mail, color: green }). Die Kurzform entspricht der Objektform ohne Farbe.
Verfügbare Farben (color):
-
black – Standardfarbe, erbt die Textfarbe
-
blue – Cembra-Blau
-
green – Cembra-Grün, meist für Bestätigungen
-
light_green – helles Grün
-
purple – Violett
-
red – Rot, für Warnungen
Hinweis: Einige Komponenten schränken die Farbauswahl ein. CardBlock erlaubt bei titleIconColor und paragraphIconColor nur black und green. Die Komponenten-Eigenschaften boxed (Icon mit Hintergrundfläche) und fill (gefüllte statt Outline-Variante) lassen sich nur programmatisch setzen, nicht im YAML.
Inhaltstypen mit Icon-Unterstützung:
-
grid – titleIcon sowie blocks[].icon und topics[].icon
-
cardBlock – titleIcon, paragraphIcon (jeweils mit …IconColor) und rows[].icon
-
bannerTable – rows[].row.icon
-
instructionCard – icon
-
vCard – iconLeft und iconRight (Kennzahlen-Variante)
-
dynamicForm – icon pro Formularfeld
Font-Subset – neue Icons hinzufügen
Aus Performance-Gründen wird nicht der komplette Material-Font geladen, sondern nur ein Subset mit den tatsächlich verwendeten Icons (public/fonts/material-icons-subset.woff2). Ein Icon, das nicht in diesem Subset enthalten ist, wird nicht dargestellt – auch wenn der Name bei Google existiert.
-
Icon im YAML verwenden – oder, wenn es nur in einer Astro-Komponente vorkommt, manuell in die Liste COMPONENT_ICONS in src/pages/dev/_generate-icons-font.txt.ts eintragen.
-
Das führende "_" im Dateinamen entfernen, den Dev-Server starten und /dev/generate-icons-font.txt im Browser aufrufen – das Subset wird neu heruntergeladen.
-
Das "_" wieder ergänzen. Die Datei darf niemals ohne führendes "_" committet werden, sonst landet sie im Produktions-Build.
Wichtige Einschränkung: Der Generator durchsucht die YAML-Seiten nur nach Feldern, deren Name mit "icon" beginnt – also icon, iconLeft und iconRight. Verschachtelte Felder wie titleIcon oder paragraphIcon werden dabei nicht erfasst. Ein neues Icon, das ausschliesslich als titleIcon verwendet wird, landet also nicht im Subset und bleibt unsichtbar. In diesem Fall muss der Name zusätzlich in COMPONENT_ICONS eingetragen werden. Die Galerie unten nutzt deshalb bewusst rows[].icon: damit hält diese Dokumentationsseite selbst alle aufgeführten Icons im Subset.
Pfeile & Navigation
Aktionen & Status
Finanzen & Produkte
Sicherheit & Vertrauen
Personen & Service
Mobile
Weitere Icons
Sonderfall cembra_logo
Der Icon-Name cembra_logo ist kein Material-Icon. Er wird ausschliesslich von der Komponente instructionCard erkannt und dort durch die Grafik /favicon-32x32.png ersetzt. In allen anderen Inhaltstypen bleibt er wirkungslos bzw. wird als Text ausgegeben.
instructionCard mit cembra_logo
Schreibweise: icon: { name: cembra_logo }