How can I get Angular Material Icon to show the outline in my Angular app?

Question

I currently have

<mat-icon>info<mat-icon> 

which gives the output of the info icon with the color filled. However, I just want the outline of the icon. How do I do that?

The icon I want is https://material.io/tools/icons/?icon=info&style=outline instead of https://material.io/tools/icons/?icon=info&style=baseline

Answer 1

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>