Some material icon doesn't show in production - css

Question

I don't know why but only in production some material icon doesn't appear, as you can see from the image the first icon is missing:
here's the code:
<mat-nav-list>
<a mat-list-item routerLink="/dashboard" matTooltip="dashboard">
<mat-icon matListIcon>bar_chart</mat-icon>
</a>
<a mat-list-item (click)="routeToContacts()" matTooltip="contacts">
<mat-icon matListIcon>people</mat-icon>
</a>

Answer 1

You need to insert style into the project:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
If it did not solve the problem, please try to add the code below in your style.css (or style.scss) :
md-icon{
font-family: 'Material Icons' !important;
}

Answer 2

If you are using SASS and have opacity set to a percentage like
mat-icon {
opacity: 50%;
padding-right: 0.5em;
}
The icons might "disappear" in production builds because a SASS rule. The result is your opacity is 0% or 1% in the CSS files produced.
Changing the opacity to a decimal will give you the result you were expecting.
mat-icon {
opacity: 0.5;
padding-right: 0.5em;
}

Answer 3

Had a similar issue, the icon event_repeat appearad as two wrong icons in production build but worked in development build. The build process changes how fonts are embedded. In my case an old version of the woff2-file was loaded (v109 instead of the current v121). The appropriate css in the folder node_modules\.cache\angular-build-fonts, so I deleted node_modules and ran cmp ci. That fixed this issue.