DEV Community

fonlow
fonlow

Posted on

Migrate from Material Icons to Material Symbols

#frontend #tutorial #angular #ui

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:

  1. Remove "@fontsource/material-icons-outlined" or alike.
  2. Add "@fontsource/material-symbols-outlined"
  3. 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" />
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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/**"
        ]
    }
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)