Replace Material Icons with Material Symbols in core-web

[rjvelazco]

Description

The core-web admin UI currently renders icons using the legacy Material Icons font. Google has since replaced that library with Material Symbols, a newer variable-font system that supports per-icon customization (fill, weight, grade, optical size), ships with a broader and more consistent icon set, and is the library Google now actively maintains.

This task tracks migrating every usage of Material Icons in core-web to Material Symbols.

Rationale

• Material Icons is in maintenance mode; Material Symbols is the actively-developed successor and receives all new icons.
• Variable-font axes (FILL, wght, GRAD, opsz) unlock lightweight state changes (e.g. filled-on-hover, bolder-on-active) without shipping multiple font files.
• A single icon system across the app avoids visual drift between components and reduces the surface area for future design updates.
• Frees us from the legacy ligature-based API and aligns with what newer PrimeNG / Material design guidance recommends.

Current state

• Stylesheets load the Material Icons web font (search core-web for material-icons, Material Icons, fonts.googleapis.com/icon?family=Material+Icons).
• Components use the font via class names (<i class=\"material-icons\">icon_name</i>) and via the pButton / PrimeNG icon=\"pi pi-…\" patterns where applicable.
• Some icon names differ between Material Icons and Material Symbols and will need a mapping pass.

Acceptance Criteria

• Audit core-web for every usage of Material Icons (font-face import, CSS class material-icons, HTML/template references, SCSS variables, documentation). Produce a list of files/components to migrate.
• Swap the font-face import(s) from Material Icons to Material Symbols (Outlined variant by default, matching current visual weight unless a design decision says otherwise).
• Replace the material-icons class usages with the Material Symbols equivalent class (e.g. material-symbols-outlined) and update any related SCSS/utility classes.
• Verify icon name parity: for every icon in use, confirm the name exists in Material Symbols. Document any renames or missing icons and choose a replacement with design.
• Preserve visual parity: icon size, color, alignment, and spacing remain the same across admin views (Content Drive, Edit Content, Workflows, Navigation, Dialogs, Toolbars, etc.).
• Remove the old Material Icons font import and any dead SCSS/utility code once no references remain.
• Update relevant component documentation / Storybook examples (if any) to reference Material Symbols.
• No regressions in Lighthouse / bundle size: the new font should not meaningfully increase initial payload (consider subsetting or loading only the Outlined variant).
• Smoke-test the admin UI in Chrome and Firefox; confirm every previously-visible icon still renders correctly.

Priority

Medium

Additional Context

• Material Symbols reference: https://fonts.google.com/icons?icon.set=Material+Symbols
• Icon renames between Material Icons and Material Symbols are documented in the official Google Fonts icon picker.
• Consider introducing a thin wrapper component (e.g. dot-icon) during this migration so future icon-library swaps only touch one place.
• Out of scope: replacing PrimeNG icons (pi pi-…) or any SVG-based icon usage — this task targets only Material Icons → Material Symbols.

[github-actions]

PRs linked to this issue

• refactor: migrate from Material Icons to Material Symbols Outlined by @rjvelazco