How to host material icons offline?

Question

My apologies if this is a very simple question, but how do you use google material icons without a

Answer 1

As of 2020, my approach is to use the material-icons-font package. It simplifies the usage of Google's material-design-icons package and the community based material-design-icons-iconfont.

1. Install the package. npm install material-icons-font --save

2. Add the path of the package's CSS file to the style property of your project's angular.json file.

   ... "styles": [ "./node_modules/material-icons-font/material-icons-font.css" ], ...

3. If using SCSS, copy content below to the top of your styles.scss file.

   @import '~material-icons-font/sass/variables'; @import '~material-icons-font/sass/mixins'; $MaterialIcons_FontPath: "~material-icons-font/fonts"; @import '~material-icons-font/sass/main'; @import '~material-icons-font/sass/Regular';

4. Use the icons in the HTML file of your project.

   // Using icon tag
   face
   face
   face
   
   // Using Angular Material's  tag
   face
   add_circle
   add_circle_outline
   

Icons from @angular/material tend to break when developing offline. Adding material-icons-font package in conjunction with @angular/material allows you to use the tag while developing offline.