demo · v131
symbol-font and UI-glyph use cases
Symbol-fonts (Material Symbols, Phosphor, weather indicators) rely on Unicode codepoints that the platform might autoflip to a colour emoji. Setting font-variant-emoji: text guarantees the monochrome glyph wins. Compare four values side by side on a real glyph string.
text
emoji
unicode
loaded icon font plus Unicode fallback
The first row uses the externally loaded Material Symbols icon font. The rows beneath use the same Unicode symbol string as a fallback path: font-variant-emoji: text keeps those symbols monochrome and recolourable, while emoji asks the colour emoji font to win where the platform has one.
Material Symbols loaded font
mail wb_sunny bolt favorite cloud phone flight umbrella beach_access ac_unit music_note edit
Unicode symbols forced to text
✉ ☀ ⚡ ♥ ☁ ☎ ✈ ☂ ☃ ♬ ☯ ✂ ✏ ❄ ☘ ✰
Same Unicode symbols forced to emoji
✉ ☀ ⚡ ♥ ☁ ☎ ✈ ☂ ☃ ♬ ☯ ✂ ✏ ❄ ☘ ✰
Checking Material Symbols font load…
the api
/* Force monochrome for an icon font */
.icon-font { font-variant-emoji: text; color: var(--brand); }
/* Force colour emoji presentation in chat bubbles */
.chat-msg { font-variant-emoji: emoji; }