What is the default value of fontSet in Angular Material icons?

Question

I have some custom icons in my app which are rendered by setting the fontSet property

<mat-icon fontSet="myFont" fontIcon="my-icon"></mat-icon>

Now, I would like to be consistent and render the Angular Material icons using their font set like so

<mat-icon fontSet="md" fontIcon="add"></mat-icon>

but it doesn't work. So I want to know what is the default value of fontSet in Angular Material icons?

Answer 1

in order to use fontSet you must declare your custom font:

@font-face {
  font-family: 'icomoon';
  src: url('path.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

the you have 2 options to use it with angular Mat-Icon

1) class to apply

.MyIconClass
{
    font-family: 'MyFontFamily' !important;
}

2) Register to AppComponent

constructor(iconRegistry: MatIconRegistry) {
   iconRegistry.registerFontClassAlias('MyFontFamily', 'MyIconClass');
}

Then you will be able to show the icon:

<mat-icon fontSet="MyIconClass" fontIcon="LigatureOrUnicodeToDisplay"></mat-icon>

or

<mat-icon fontSet="MyIconClass">LigatureOrUnicodeToDisplay</mat-icon>

If you are like me, and dont want to have more params, just replace the .material-icons with your own font.

.material-icons {
  font-family: 'MyFontFamily';
...
}

and then you will be able to use it like this

LigatureToDisplay

which i love.

You can use this link to create you own icons collection with svg.

https://icomoon.io

happy coding.