material-symbols

material-symbols packages Google’s Material Symbols icon set as ready-to-import CSS, Sass, and variable woff2 fonts for outlined, rounded, and sharp styles. A nightly GitHub Actions workflow pulls the latest icon set directly from Google’s source, regenerates the TypeScript icon-name types and Sass partials, bumps the version, and republishes — so the icon list never goes stale without a manual update.

Each style ships its own font-face and CSS file (outlined.css, rounded.css, sharp.css) so bundlers only copy the woff2 variant actually imported, and the variable font axes (FILL, weight, GRADE, optical size) are exposed via standard font-variation-settings for runtime customization without extra CSS classes.

What You Get

• Three icon styles (outlined, rounded, sharp) as separate CSS/Sass entry points
• Variable woff2 fonts supporting FILL, weight, GRADE, and optical size axes via font-variation-settings
• A generated TypeScript union type (MaterialSymbols) listing every current icon name for autocomplete and typo-checking
• Per-style CSS files to avoid bundling all three font variants when only one is used

Common Use Cases

• Dropping Material Symbols into a React, Vue, or Angular app via a single CSS/Sass import
• Using Angular Material’s mat-icon with the outlined/rounded/sharp fontSet classes
• Referencing icons by name in a typed codebase using the generated MaterialSymbols type
• Keeping an icon set current automatically instead of manually tracking Google’s Material Symbols releases

Under The Hood

Architecture This monorepo is organized as an orchestration layer around the sibling @material-design-icons/scripts CLI — the root package.json’s script pipeline (download → generate → build → version → publish) drives everything; the material-symbols/, font/, svg/, and metadata/ workspaces each hold pre-generated font, CSS, SCSS, SVG, and type-definition artifacts rather than application source, with material-symbols/index.d.ts exporting a large generated union type covering every current icon name and index.css/index.scss plus per-style outlined/rounded/sharp CSS+Sass files providing the @font-face declarations that point at bundled woff2 fonts. There is no runtime logic to trace: the “architecture” is entirely a build pipeline executed nightly by .github/workflows/update.yml, which fetches the latest icon data from Google’s Material Symbols source, regenerates types and Sass partials, bumps semver, and republishes. What would break if the core abstraction (the scripts package’s download/generate commands) changed is the content-refresh cycle itself, not the already-published artifacts, which are static once versioned.

Tech Stack The root devDependency @material-design-icons/scripts is the sole engine driving the download and generate steps; the material-symbols/ subpackage uses sass as a devDependency to compile its .scss partials (index.scss importing outlined/rounded/sharp) into the published .css files, while the sibling font/ and svg/ workspaces use the same sass tooling plus svgo and svgo-add-viewbox for SVG optimization. There is no runtime framework, database, or server component — the package is pure static asset distribution via npm workspaces. CI runs on GitHub Actions, with update.yml using actions/setup-node@v2 on Node 16 for the nightly update job and publish.yml using actions/setup-node@v6 on Node 24 for publishing — a minor Node-version inconsistency between the two workflows — and publish.yml pushes to npmjs.org via OIDC (id-token: write) across every format-specific workspace.

Code Quality No test files exist anywhere in the repository — a recursive search for test-related filenames returns zero matches — and there is no linter or formatter configured for the package’s own JS/CSS surface beyond what the scripts/sass/svgo tooling enforces internally. Quality here is process-enforced rather than code-enforced: the update workflow’s dry-run check step is the closest thing to a validation gate, only proceeding to a full update and publish when new icon metadata is actually detected, and every shell step uses fail-fast flags rather than explicit in-code error handling.

API Design The published API is deliberately minimal: import the CSS or Sass entry point, apply a semantic class name for the chosen style, and adjust a font-variation-settings block for weight, fill, grade, and optical size — there is no JS API surface at all. The generated MaterialSymbols TypeScript type gives editor-level autocomplete and typo-checking for consumers referencing icon names in a typed context, and the README explicitly documents per-format entry points (e.g. outlined.css vs the full index.css) specifically so bundlers don’t copy unused woff2 variants — a thoughtful, low-boilerplate affordance for a pure font package.