Icons
All icons come from the Google font "Material Symbols Outlined" and are rendered as a ligature by the Icon component. In YAML you always give the technical icon name (e.g. mail), never an image path. This page lists all 56 icons currently available – the icon itself next to the exact name to enter in YAML.
YAML syntax
There are two notations: the short form as a plain string (icon: mail) and the object form with an optional colour (icon: { name: mail, color: green }). The short form is identical to the object form without a colour.
Available colours (color):
-
black – default, inherits the text colour
-
blue – Cembra blue
-
green – Cembra green, mostly for confirmations
-
light_green – light green
-
purple – purple
-
red – red, for warnings
Note: some components restrict the colour choice. CardBlock only allows black and green for titleIconColor and paragraphIconColor. The component properties boxed (icon with a background box) and fill (filled instead of outlined variant) can only be set programmatically, not from YAML.
Content types that support icons:
-
grid – titleIcon plus blocks[].icon and topics[].icon
-
cardBlock – titleIcon, paragraphIcon (each with …IconColor) and rows[].icon
-
bannerTable – rows[].row.icon
-
instructionCard – icon
-
vCard – iconLeft and iconRight (key figure variant)
-
dynamicForm – icon per form field
Font subset – adding new icons
For performance reasons the full Material font is not loaded; only a subset containing the icons actually in use (public/fonts/material-icons-subset.woff2). An icon that is not part of that subset will not be displayed – even if the name exists at Google.
-
Use the icon in YAML – or, if it only appears in an Astro component, add it manually to the COMPONENT_ICONS list in src/pages/dev/_generate-icons-font.txt.ts.
-
Remove the leading "_" from that file name, start the dev server and open /dev/generate-icons-font.txt in the browser – the subset is downloaded again.
-
Restore the "_". The file must never be committed without the leading "_", otherwise it ends up in the production build.
Important limitation: the generator only scans the YAML pages for fields whose name starts with "icon" – that is icon, iconLeft and iconRight. Nested fields such as titleIcon or paragraphIcon are not picked up. A new icon used only as a titleIcon therefore never reaches the subset and stays invisible; in that case the name must additionally be added to COMPONENT_ICONS. This is why the gallery below deliberately uses rows[].icon – that way this documentation page itself keeps every icon listed here inside the subset.
Arrows & navigation
Actions & UI state
Finance & products
Security & trust
People & service
Mobile
Other icons
Special case cembra_logo
The icon name cembra_logo is not a Material icon. It is only recognised by the instructionCard component, where it is replaced with the image /favicon-32x32.png. In any other content type it has no effect and may be rendered as plain text.
instructionCard with cembra_logo
Notation: icon: { name: cembra_logo }