Add Google Icons with CSS: Material Symbols vs. Material Icons
Material Symbols or classic Material Icons?
Google offers two related icon families as web fonts. Material Symbols is the newer variable set with more than 2,500 symbols, three styles, and adjustable axes. Material Icons is the older set with fixed variants. Material Symbols is usually more flexible for new work, while existing sites can continue using Material Icons.
Google licenses both under Apache License 2.0. Exact glyph counts can change; production performance depends on which icons the site actually downloads.
Add Material Symbols
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
<span class="material-symbols-outlined" aria-hidden="true">home</span>
The default request uses weight 400, optical size 48, grade 0, and fill 0. The style families are Outlined, Rounded, and Sharp.
Control the variable axes
| Axis | Purpose | Documented range |
|---|---|---|
FILL |
outlined to filled | 0 to 1 |
wght |
stroke weight | 100 to 700 |
GRAD |
finer thickness adjustment | −50 to 200 |
opsz |
optical size | 20 to 48 |
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
.icon-filled {
font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}
The full variable space is large. Limit axes and values to actual requirements.
Subset the font
icon_names limits the response to alphabetically sorted, comma-separated ligatures:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=block" rel="stylesheet">
Google documents about 1.7 KB for this example, compared with about 295 KB for the static full set. These are example payloads, not a permanent guarantee. display=block prevents ligature names from flashing before the font loads.
Classic Material Icons
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<span class="material-icons" aria-hidden="true">face</span>
Other fixed families include Outlined, Round, Sharp, and Two Tone.
Self-hosting and privacy
An external request connects the visitor's browser to Google and necessarily transmits its IP address. Self-hosting prevents these font requests, but it does not automatically make the entire website GDPR-compliant.
@font-face {
font-family: "Material Symbols Outlined";
font-style: normal;
src: url("/fonts/material-symbols-outlined.woff2") format("woff2");
}
.material-symbols-outlined {
font-family: "Material Symbols Outlined";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
direction: ltr;
font-feature-settings: "liga";
}
Match the file format and family name to the downloaded asset and retain its license.
Accessibility
Decorative icons should use aria-hidden="true". An icon-only button needs an accessible name:
<button type="button" aria-label="Open settings">
<span class="material-symbols-outlined" aria-hidden="true">settings</span>
</button>
Color alone must not communicate state. Interactive icons also need visible focus, sufficient contrast, and keyboard support.
When SVG is better
Inline SVG or an SVG sprite avoids ligatures and can load only the required shapes. It often provides clearer control over semantics and multicolor artwork. A web font remains convenient for many single-color icons sharing the same CSS.
Troubleshooting
1. Verify the stylesheet and font requests in the network panel.
2. Compare the class and family names exactly.
3. If raw names appear, check the file and the liga feature.
4. If the payload is large, inspect icon_names and requested axes.
5. Clear caches after replacing a self-hosted font file.
