Skip to content

Commit c909031

Browse files
committed
docs(readme): note icon_names subset can render axes differently
Adds a short caveat to the Material Symbols section of the README documenting that Google Fonts' server-side `icon_names` subset can render glyphs at a different stroke/fill/weight state than the full, un-subset font, regardless of the requested `font-variation-settings`. Only the subset (fonts.gstatic.com/l/font?kit=...) is affected; the full font (fonts.gstatic.com/s/...) renders correctly. Documents two working workarounds (drop icon_names, or self-host the shipped variablefont/ woff2) and notes this is a Google Fonts serving behavior that a PR to this repo cannot itself change. Docs-only; no icon or script files touched. Reported in #1997. Related open reports: #1834, #1818. Claude-Session: https://claude.ai/code/session_01VY8qBKMt6C2B7iPBopiwni
1 parent 819d786 commit c909031

1 file changed

Lines changed: 17 additions & 0 deletions

File tree

README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,23 @@ What is currently _not_ available in Material Symbols?
7272
- the only pre-made fonts are the variable fonts
7373
- there are no two-tone icons
7474

75+
### Caveat: the `icon_names` subset can render axes differently than the full font
76+
77+
Google Fonts recommends the [`icon_names` property](https://developers.google.com/fonts/docs/material_symbols#optimizing-with-the-icon_names-property) to shrink payloads by requesting only the glyphs you use. This is a _server-side_ subset: the generated CSS points at a `fonts.gstatic.com/l/font?kit=...` URL, while the full, un-subset font is served from the canonical `fonts.gstatic.com/s/materialsymbolsrounded/...` path.
78+
79+
The two can render the same icon at a different stroke, fill, or weight state, regardless of the `font-variation-settings` your CSS specifies (for example `'wght' 300`, `'FILL' 0`). What's known so far:
80+
- It shows up with a large `icon_names` list (~400 names); a short list (2 icons) does not reproduce it.
81+
- Only the subset is affected — the full font renders correctly.
82+
- Because the subset is served dynamically, the output can change on a Google Fonts font-version rollout with no change to your app or its repo. Build pipelines that inline Google Fonts CSS (for example Angular CLI `optimization.fonts: true`) can bake a broken subset into a production bundle.
83+
84+
Workarounds that work today:
85+
- Drop the `&icon_names=...` parameter and accept the larger full-font payload.
86+
- Self-host the full variable font, shipped here at `variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2`.
87+
88+
> This is a Google Fonts serving behavior, not an issue with the icon files in this repo, so a pull request here cannot change it.
89+
90+
Tracking: [#1997](https://github.com/google/material-design-icons/issues/1997), with related [#1834](https://github.com/google/material-design-icons/issues/1834) and [#1818](https://github.com/google/material-design-icons/issues/1818).
91+
7592
## Material Icons
7693

7794
The icons can be browsed in a more user-friendly way at https://fonts.google.com/icons?icon.set=Material+Icons

0 commit comments

Comments
 (0)