Material Icon Font

Found some time to scrape (thanks @jamesplease) and build the baseline, outline, round, and sharp material icon families all into font ligatures. You can find the ligature reference gallery here. There's probably some bugs but feel free to try!

reference

icon ligature reference gallery

setup

install node

https://nodejs.org/en/

install package dependencies

• npm install at the root

making fonts

1. Replace svgs located in res
2. Navigate and make sure directory is in the root folder
3. open makeMaterial and uncomment out the style variable you want to generate(i know this sucks for now)
4. node makeMaterial.js in the terminal
5. Bin will hold all generated assets

using the font with Angular Material

1. Install package via npm npm i --save https://github.com/petergng/materialIconFont.git
2. Import font css in your projects style.css @import '~material-icon-font/dist/Material-Icons.css';
3. Define which font family you want to use in the
   • to use it globally edit style.css

   .material-icons {
        font-family: 'Material Icons Outline'
   }
   

   • to use it for one element only use style or class attribute

   <mat-icon style="font-family: 'Material Icons Sharp'">fastfood</mat-icon>