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

Possible duplicate of [How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?](https://stackoverflow.com/questions/50303454/how-to-use-the-new-material-design-icon-themes-outlined-rounded-two-tone-and) — Z. Bagley, May 15 '19 at 19:46

score 80 · Answer 1 · answered Apr 27 '19 at 15:41

80

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>

answered Apr 27 '19 at 15:41

Sher

945
1
7
7

11

keep scrolling..., use `fontSet` – cambunctious Apr 08 '22 at 14:11

score 44 · Accepted Answer · edited Feb 11 '23 at 20:59

44

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.

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>

edited Feb 11 '23 at 20:59

Evan Kleiner

329
3
12

answered May 15 '18 at 22:41

Z. Bagley

8,942
1
40
52

Thank you! I was trying to prefix 'outline' to the name. – zer0 May 15 '18 at 22:58
16

this is not working for me when the icon name has a complex name like – Daniel Delgado Oct 17 '18 at 00:04
1

Also didn't work for me, specifically for edit_outline icon. Sherman's answer worked nicely though – Chris Newman May 15 '19 at 17:05
I've voted to close this question since this is answered more in depth here: https://stackoverflow.com/questions/50303454/how-to-use-the-new-material-design-icon-themes-outlined-rounded-two-tone-and – Z. Bagley May 15 '19 at 19:47
1

The question is not out of date and the link you've provided is about using material design and has nothing to do with the angular material AFAICS. – Skeeve Mar 09 '21 at 13:29
@Skeeve the link I provided shows the exact way to import and apply the material design icons (which is what my answer above addressed previously), and it uses their new standardization. This isn't an Angular or Material specific question or answer in the end, and that linked question provides the css needed to apply it any icon (`mat-icon` or standdard `i`). – Z. Bagley Mar 09 '21 at 14:08
1

> This isn't an Angular or Material specific question Oh, but this is. It has corresponding tags and it specifically mentions angular material in the title and in the question itself. – Skeeve Mar 10 '21 at 15:23
@Skeeve OK dude. – Z. Bagley Mar 10 '21 at 15:46
this works nice. extending the href with the other font-families in index.html. made a new answer (an extention), couldnt fit it here. – JamesDK Aug 09 '22 at 10:56

score 43 · Answer 3 · answered Feb 13 '20 at 10:42

43

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.

answered Feb 13 '20 at 10:42

zeljko_a

3,725
1
22
23

score 14 · Answer 4 · answered Sep 09 '21 at 13:00

14

Index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

Outline all mat-icon in e.q. AppModule

export class AppModule { 
  constructor(iconRegistry: MatIconRegistry) {
    iconRegistry.setDefaultFontSetClass('material-icons-outlined');
  }
}

answered Sep 09 '21 at 13:00

NicolayM

161
1
3

1

This is what I was looking for. Make a change in one place to quickly switch between filled and outlined. – Lee Gunn Dec 28 '21 at 18:52
3

This should be marked as answer for global setting default icon style – Danny Schneider Aug 03 '22 at 11:18
1

Exactly what I was looking for. Clean. – Gaetan LOISEL Oct 27 '22 at 20:06

tinystone · Answer 5 · 2022-05-09T12:06:39.390

There are 2 ways.

// 1
// "_outline"

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<mat-icon>info</mat-icon>
<mat-icon>info_outlined</mat-icon> // outline work

// 2 
// "_outline" + fontSet attribute

<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">

<mat-icon fontSet="material-icons-outlined">info_outlined</mat-icon> // outline work
<mat-icon fontSet="material-icons-two-tone">info</mat-icon>
<mat-icon fontSet="material-icons-round">info</mat-icon>
<mat-icon fontSet="material-icons-sharp">info</mat-icon>

However, not all icons have the variations in the first way. eg. <mat-icon>home</mat-icon> and <mat-icon>home_outlined</mat-icon> look the same. For those icons, the second way ("_outline" + fontSet attribute) works well.

more examples:

// fontSet attribute

<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">

<mat-icon>home</mat-icon>
<mat-icon>home_outlined</mat-icon> // outline not work
<mat-icon fontSet="material-icons-outlined">home</mat-icon> // outline happens to work (notice: this is NOT true for all icons)

// "_outline" + fontSet attribute

<mat-icon fontSet="material-icons-outlined">home_outlined</mat-icon> // outline work, for all icons. Recommended.
<mat-icon fontSet="material-icons-two-tone">home</mat-icon>
<mat-icon fontSet="material-icons-round">home</mat-icon>
<mat-icon fontSet="material-icons-sharp">home</mat-icon>

score 5 · Answer 6 · answered Sep 07 '20 at 00:23

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

answered Sep 07 '20 at 00:23

Kheireddine Azzez

111
2
4

score 1 · Answer 7 · answered Aug 09 '22 at 11:17

this is just an extention/improvement to @z.bagley's answer https://stackoverflow.com/a/50360119/16448199

replacing in index.html the old line with this extended one worked like a charm:

<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">

Improved

just realized after that, you can do that with the material-symbols too! which has more format varities (except: no twotone) and has more icons to choose. they look more logic with only 3 font-families to choose:

rounded
outline (which should have called 'normal')
and sharp

and further with the attribute "fill" to choose between filled or outlined.

but instead of

https://fonts.googleapis.com/css?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,300,1,0|Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0|Material+Symbols+Sharp:opsz,wght,FILL,GRAD@48,400,1,0

you have to use your own css, cause google css generator link is messing something up and doesnt support all variations together. this way you can even go step further and self host the fonts.

i prepared a small example: https://jsfiddle.net/apnft/tz9wugd8/ or check it here directly:

.material-icons, .material-icons-outlined, .material-icons-round, 
.material-icons-sharp, .material-icons-two-tone {
  font-size: 48px !important;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v39/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}

@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v38/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDB_Qb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2) format('woff2');
}

@font-face {
  font-family: 'Material Symbols Sharp';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialsymbolssharp/v38/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReaU4bHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2) format('woff2');
}

@font-face {
  font-family: 'Material Symbols Outlined _Filled';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v39/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}

@font-face {
  font-family: 'Material Symbols Rounded _Filled';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v38/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOc7TOVpeRL2w5rwZu2rIelXxc.woff2) format('woff2');
}

@font-face {
  font-family: 'Material Symbols Sharp _Filled';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialsymbolssharp/v38/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReYU3rHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-HxOezEL3sVTgJtfbYxOLojCL.woff2) format('woff2');
}

.material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp,
.material-symbols-outlined-filled, .material-symbols-rounded-filled, .material-symbols-sharp-filled {
  font-weight: normal;
  font-style: normal;
  font-size: 48px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
}

.material-symbols-sharp {
  font-family: 'Material Symbols Sharp';
}

.material-symbols-outlined-filled {
  font-family: 'Material Symbols Outlined _Filled';
}

.material-symbols-rounded-filled {
  font-family: 'Material Symbols Rounded _Filled';
}

.material-symbols-sharp-filled {
  font-family: 'Material Symbols Sharp _Filled';
}

<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">
icons<br>normal/outlined/round/sharp/twotone
<br>
<mat-icon class="material-icons">home</mat-icon>
<mat-icon class="material-icons-outlined">home</mat-icon>
<mat-icon class="material-icons-round">home</mat-icon>
<mat-icon class="material-icons-sharp">home</mat-icon>
<mat-icon class="material-icons-two-tone">home</mat-icon>
<br>
<mat-icon class="material-icons">account_circle</mat-icon>
<mat-icon class="material-icons-outlined">account_circle</mat-icon>
<mat-icon class="material-icons-round">account_circle</mat-icon>
<mat-icon class="material-icons-sharp">account_circle</mat-icon>
<mat-icon class="material-icons-two-tone">account_circle</mat-icon>
<br>
<mat-icon class="material-icons">adf_scanner</mat-icon>
<mat-icon class="material-icons-outlined">adf_scanner</mat-icon>
<mat-icon class="material-icons-round">adf_scanner</mat-icon>
<mat-icon class="material-icons-sharp">adf_scanner</mat-icon>
<mat-icon class="material-icons-two-tone">adf_scanner</mat-icon>
<br>
symbols<br>outlined/+filled /rounded/+filled /sharp/+filled
<br>
<mat-icon class="material-symbols-outlined">home</mat-icon>
<mat-icon class="material-symbols-outlined-filled">home</mat-icon>
<mat-icon class="material-symbols-rounded">home</mat-icon>
<mat-icon class="material-symbols-rounded-filled">home</mat-icon>
<mat-icon class="material-symbols-sharp">home</mat-icon>
<mat-icon class="material-symbols-sharp-filled">home</mat-icon>
<br>
<mat-icon class="material-symbols-outlined">account_circle</mat-icon>
<mat-icon class="material-symbols-outlined-filled">account_circle</mat-icon>
<mat-icon class="material-symbols-rounded">account_circle</mat-icon>
<mat-icon class="material-symbols-rounded-filled">account_circle</mat-icon>
<mat-icon class="material-symbols-sharp">account_circle</mat-icon>
<mat-icon class="material-symbols-sharp-filled">account_circle</mat-icon>
<br>
<mat-icon class="material-symbols-outlined">adf_scanner</mat-icon>
<mat-icon class="material-symbols-outlined-filled">adf_scanner</mat-icon>
<mat-icon class="material-symbols-rounded">adf_scanner</mat-icon>
<mat-icon class="material-symbols-rounded-filled">adf_scanner</mat-icon>
<mat-icon class="material-symbols-sharp">adf_scanner</mat-icon>
<mat-icon class="material-symbols-sharp-filled">adf_scanner</mat-icon>

score 1 · Answer 8 · answered Jul 07 '23 at 13:50

In my opinion, the best way to do this is to inject the icon defaults. First add the font to index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

Then add the defaults to the module:

providers: [
  { provide: MAT_ICON_DEFAULT_OPTIONS, useValue: { fontSet: 'material-icons-outlined' } }
]

With this all icons will use the outlined version.

score 0 · Answer 9 · answered Dec 10 '18 at 13:43

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

score 0 · Answer 10 · answered May 27 '22 at 19:08

Try <span> tag instead of <mat-icon> tag.

Something like this:

    <span class="material-icons-outlined">info</span>

And if you haven't already you may have to update your reference to the latest reference link:

    <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">

I had ran into the same problem but <span> worked fine for me and ever since I have been using <span> instead of <mat-icon>.

score 0 · Answer 11 · answered May 23 '23 at 01:28

First, go to your index.html add the following line in <head>:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"/>

You can also line one from fonts.google.com/icons by selecting specific icon.

then write the following line of code in HTML:

<mat-icon class="material-symbols-outlined">delete</mat-icon>

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

11 Answers11

Edit: 5/2019

Edit: 2/2022

Original answer:

Linked