How can I get Angular Material Icon to show the ou

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

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