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+Outlinedin 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>