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

Question

I currently have

info

which gives the output of the info icon with the color filled. However, I just want the

Answer 1

Edit: 5/2019

This question is out of date. A more in depth, recent, answer can be found here: How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?

The general idea is that some of the icons aren't imported by default, and need to be targeted from a different library.

---

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>

Answer 2

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>

Answer 3

I was unsatisfied that until know Google hasn't yet released their new designs as font or svg icon set. Therefore I put together a small npm package to solve the problem.

https://www.npmjs.com/package/ts-material-icons-svg

Simply import the icons you wanna use and add them to your registry. Short tutorial is in the Readme.

Cheers Marco

Answer 4

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.

Answer 5

Put this in the index folder " < link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet"/>"

< mat-icon fontSet="material-icons-outlined">edit