How to use custom icon font in angular

Question

At the moment we use mat-icon component with angular material icons. However, we want to create our custom icon font with the customer's branding and use it in angular. I used https://icomoon.io/ and created our own font. But how do we use it in angular project and can we still use mat-icon compoment.

Answer 1

Let me suggest the simplest way

1. Place your yourfont.ttf into src/assets
2. Add it into src/style.css in this way:

   @font-face {
     font-family: 'MyFont';
     src: url('../assets/myfont.ttf');
   }
   

3. Use the new font wherever you need, for example

   body {
     font-family: 'MyFont';
   }
   

That's all.