Draw the 67 Material Symbols Google ships without a viewBox at every size

Google publishes 67 symbols per cut (auto_awesome, insights,
tips_and_updates, battery_50 ...) with width and height but no viewBox,
their paths in 24 units, or 20 in the 20 cut, where every other symbol
draws in `0 -960 960 960`. bin/fetch-symbols dropped the size so CSS
decides it, which left these with no coordinate system: `<x-icon>`
drew them at 1:1, whole only at exactly 24px and cut off or misplaced
at any other size, the 20 cut every small button uses included.
normalise() now turns a file's width and height into its viewBox when
it has none, before dropping them. The 268 files are regenerated from
Google's originals at the recorded SOURCE commit with the fixed step
(each shipped file matched the old step's output first; the other
16,272 do not change), and every path lies inside its new viewBox.
IconTest checks that each shipped symbol has a viewBox and that
`<x-icon name="auto_awesome">` renders in 20 units at size 16 and in 24
at size 32; both fail without the change.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-09-17 04:18:10 +02:00
co-authored by Claude Opus 5
parent b7e16476cd
commit 7a95449c82
271 changed files with 296 additions and 270 deletions
+6 -1
View File
@@ -53,9 +53,14 @@ for size in 24 20; do
done
# Google's files carry width="24" height="24" and no fill. Drop the size so CSS decides
# it, and paint in currentColor so an icon takes the colour of the text around it.
# it, and paint in currentColor so an icon takes the colour of the text around it. Nearly
# every file draws in a viewBox="0 -960 960 960"; a few carry none and draw in the units of
# their width and height (24, or 20 in the 20 cut), so the size becomes their viewBox before
# it goes, or the glyph would only fit at exactly that many pixels.
normalise() {
sed -E \
-e '/viewBox=/!s/<svg ([^>]*)height="([0-9]+)(px)?"([^>]*)width="([0-9]+)(px)?"/<svg \1height="\2"\4width="\5" viewBox="0 0 \5 \2"/' \
-e '/viewBox=/!s/<svg ([^>]*)width="([0-9]+)(px)?"([^>]*)height="([0-9]+)(px)?"/<svg \1width="\2"\4height="\5" viewBox="0 0 \2 \5"/' \
-e 's/ (width|height)="[0-9]+(px)?"//g' \
-e 's/<svg /<svg fill="currentColor" /' \
"$1"