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

Issue

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

Solution

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>

Answered By - Z. Bagley