Icons are Material Symbols. The default class is
material-symbols; it uses the outlined family.
Ligature names come from the
Material Symbols catalog.
The compiled stylesheet ships the outlined, rounded, and sharp
variable fonts. Browsers download a family only after markup uses
it, so the default outlined class does not fetch rounded or sharp.
Keep dist/fonts/ next to dist/css/ so
the sheet's url(../fonts/...) paths resolve. Override
$expressive-include-fonts when compiling Sass if the
page already loads these families.
Put material-symbols on an element and use the ligature
as the text. .material-icons is kept as an alias so
older markup still renders with Symbols.
Default
Outlined
Rounded
Sharp
<span class="material-symbols" aria-hidden="true">add</span>
<span class="material-symbols-rounded" aria-hidden="true">add</span>
<span class="material-symbols-sharp" aria-hidden="true">add</span>
Icons inherit the current text color, so token utilities such as
primary-text work. For icons inside buttons, see
Buttons.
Style
Outlined, rounded, and sharp are font families, not variation
axes. Set the icon-style attribute — the same idea as
theme — or set --md-icon-font directly.
Either one inherits, so a subtree can use a different style.
<html icon-style="rounded">
<div icon-style="sharp">…</div>
<div style="--md-icon-font: var(--md-icon-font-sharp)">…</div>
Values are outlined (default), rounded,
and sharp. A single icon can still opt out with
material-symbols-rounded or
material-symbols-sharp.
outlined
rounded
sharp
Fill, weight, grade, optical size
These four are variable-font axes. They inherit, so set them on
:root or on a wrapper. A missing range in the Google
Fonts URL (a link without opsz,wght,FILL,GRAD@…)
serves a static instance and the axes will not move.
| Token | Default | Range |
|---|---|---|
--md-icon-fill |
0 | 0 or 1 |
--md-icon-weight |
400 | 100–700 |
--md-icon-grade |
0 | −50–200 |
--md-icon-optical-size |
24 | 20–48 (unitless) |
:root {
--md-icon-fill: 0;
--md-icon-weight: 400;
--md-icon-grade: 0;
--md-icon-optical-size: 24;
}
<span class="material-symbols" style="--md-icon-fill: 1; --md-icon-weight: 600" aria-hidden="true">favorite</span>
icon-filled is a shortcut for
--md-icon-fill: 1.
Empty
Filled
Weight 200
Weight 700
Sizes
Size an icon with font-size, or use the preset classes
on the icon: tiny (1rem),
small (2rem), medium (4rem), and
large (6rem). Those classes also nudge
--md-icon-optical-size so the glyph is cut for that
size.
<span class="material-symbols large" aria-hidden="true">insert_chart</span>