Menu
I use <mat-icon>person</mat-icon> and have a result:
I need the icon on theme Outlined: 
How do to do it ?
Importantion of the icons: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
900
You can change the color of the icons as per the requirement: Primary . Accent. Warn.
Since Angular Material uses 'Material Icons' Font-Family, the icon size depends on font-size. Therefore, if you want to modify the size of the icon then you change its font-size in your CSS file. You have to set the width and height too. After setting width and height to a value less that 24px, it looked awkward.
import {MatIconModule} from '@angular/material/icon'; & link in your global index. html. Save this answer.
After dealing with the same issue I found that thankfully this now works...
First, add the outlined icons to your import using "|" to separate...
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
Then add the class to your mat-icon...
<mat-icon class="material-icons-outlined">person</mat-icon>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
