How can I get Angular Material Icon to show the outline in my Angular app?
Edit: 5/2019
This question is out of date. A more in depth, recent, answer can be found here: [https://stackoverflow.com/questions/50303454/how-to-use-the-new-material-design-icon-themes-outlined-rounded-two-tone-and][1]The general idea is that some of the icons aren't imported by default, and need to be targeted from a different library.
Edit: 2/2022
Quick reference to the latest import link to save clicks:<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
Original answer:
You're looking for <mat-icon>info_outline</mat-icon>
.
You can use this same template for any item that has an outline image, but don't attempt to use it for objects that are the same for filled/outlined.
e.g. <mat-icon>label</mat-icon><mat-icon>label_outline</mat-icon>
This is how I did it:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
rel="stylesheet"/>
<mat-icon fontSet="material-icons-outlined">edit</mat-icon>
Found the solution here.
You may include this
|Material+Icons+Outlined
in the url to display material icon in outline.
Example:
@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
Then in the template file, you can add in material-icons-outlined
<mat-icon class="material-icons-outlined">home</mat-icon>