spikerj/spikersoft-issues
1
0 Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

[Angular] Migrate from the Material Icons font to Material Symbols #1170

New Issue
Open
opened 2026-10-02 04:44:19 +00:00 by spikerj · 0 comments
spikerj commented 2026-10-02 04:44:19 +00:00
Owner
Copy link
Copy source

Why

Google's legacy Material Icons font is deprecated in favour of Material Symbols (variable font: weight/fill/grade/optical size, far larger icon set, still maintained). Angular Material 22.2 mat-icon now detects Material Symbols ligatures and applies the right classes (angular/components#33750), so the switch no longer needs per-icon fontSet plumbing.

What changes for us

  • Self-hosted font: projects/spikersoft/src/assets/fonts/material-icons/material-icons.css (+ the font files) → self-host Material Symbols (Outlined/Rounded — pick one to match the glass theme) and set MatIconRegistry.setDefaultFontSetClass(...) at bootstrap.
  • 454 files use <mat-icon>; a handful of ligature names differ between the sets — script a check of all used ligature names against the Symbols codepoints list.
  • contact.component.ts uses MatIconRegistry directly — review.
  • Re-check the ngsw asset groups / offline cache include the new font.

Acceptance criteria

  • one icon font shipped (old font removed)
  • every used ligature renders (scripted check + visual pass of nav, dashboards, playgrounds)
  • bundle/asset size noted in the PR

Size: M. Best after the Angular 22.2 upgrade.

Links: Best after #1165.

Filed from the 2026-10-02 spikersoft-angular pnpm outdated changelog review.

## Why Google's legacy **Material Icons** font is deprecated in favour of **Material Symbols** (variable font: weight/fill/grade/optical size, far larger icon set, still maintained). Angular Material 22.2 `mat-icon` now detects Material Symbols ligatures and applies the right classes (angular/components#33750), so the switch no longer needs per-icon `fontSet` plumbing. ## What changes for us - Self-hosted font: `projects/spikersoft/src/assets/fonts/material-icons/material-icons.css` (+ the font files) → self-host Material Symbols (Outlined/Rounded — pick one to match the glass theme) and set `MatIconRegistry.setDefaultFontSetClass(...)` at bootstrap. - 454 files use `<mat-icon>`; a handful of ligature names differ between the sets — script a check of all used ligature names against the Symbols codepoints list. - `contact.component.ts` uses `MatIconRegistry` directly — review. - Re-check the ngsw asset groups / offline cache include the new font. ## Acceptance criteria - [ ] one icon font shipped (old font removed) - [ ] every used ligature renders (scripted check + visual pass of nav, dashboards, playgrounds) - [ ] bundle/asset size noted in the PR Size: **M**. Best after the Angular 22.2 upgrade. **Links:** Best after #1165. --- _Filed from the 2026-10-02 spikersoft-angular `pnpm outdated` changelog review._
spikerj added the enhancement label 2026-10-02 04:44:19 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Labels
Clear labels
agentic
Actionable surfaced by the agentic architecture & security review
 bug
Something is not working
 duplicate
This issue or pull request already exists
 enhancement
New feature
 epic
Cross-repo epic — children live in per-repo trackers
 help wanted
Need some help
 invalid
Something is wrong
 question
More information is needed
 sonarqube
Code quality issue surfaced by SonarQube (bug / code smell)
 wontfix
This won't be fixed
No labels enhancement
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
spikerj (Joseph Spiker)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#1170