This content originally appeared on DEV Community and was authored by fonlow
Since 2016, I have developed a few complex business applications with frontend on Angular and Angular Material Components. Event though Angular Material Components Suite is still primarily utilizing Material Icons, the suite is working well with Material Symbols.
I would typically host the icons/symbols in the same host with the SPA codes, rather than having references to CDN. In fact, one of my apps can work well offline totally without the Internet even during the first launch.
Import Material Symbols package
In package.json:
- Remove "@fontsource/material-icons-outlined" or alike.
- Add "@fontsource/material-symbols-outlined"
- Run
npm i
Remove locally hosted material icons from the assets folder.
I had typically "src/assets/material-icons" to contain what copied from "node_modules/@fontsource/material-icons-outlined".
Because the architectural design of material symbols is different from material icons, such folder is not needed under "assets". Instead, "ng build" will generate folder "media" under app root to contain the artifacts of material symbols.
Remove the reference to material icons in index.html
<link rel="stylesheet" type="text/css" href="assets/icons/material-icons/index.css" />
This line should be removed.
Tell Angular app to use material symbols
In app.component.ts, add the following in the constructor:
private iconRegistry: MatIconRegistry){
iconRegistry.setDefaultFontSetClass('material-symbols-outlined');
Import Material Symbols to app build
In global stylesheet styles.css, add the following:
@import "@fontsource/material-symbols-outlined/400.css";
.mat-icon.material-symbols-outlined {
vertical-align: middle;
line-height: 1;
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-size: 24px;
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
Material Symbols (material-symbols-outlined) use different font metrics compared to the older Material Icons. They often have more baseline padding and vertical centering assumptions that don’t play well with mat-button-toggle, which uses inline-flex and align-items: center by default.
In mat-button-toggle, the icon is treated like text content, and the font's vertical metrics push it slightly downward compared to other components like mat-icon-button or mat-menu.
Therefore .mat-icon.material-symbols-outlined is important for the vertical alignment of material symbols appearing in some components like MatButtonTootle and suffix button in FormField etc.
Update for Angular Service Worker
In ngsw-config.json, under "assetGroups", add the following:
{
"name": "Material Symbols",
"installMode": "lazy",
"updateMode": "lazy",
"resources": {
"files": [
"/media/**"
]
}
}
Run ng build and test
You will see folder "media" in root containing "material-symbols-outlined-latin-400-normal.woff2" in development build or "material-symbols-outlined-latin-400-normal-hash.woff2" in production build.
This content originally appeared on DEV Community and was authored by fonlow
fonlow | Sciencx (2025-10-28T00:11:20+00:00) Migrate from Material Icons to Material Symbols. Retrieved from https://www.scien.cx/2025/10/28/migrate-from-material-icons-to-material-symbols/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.