How to host material icons offline?

Method 2. Self hosting Developer Guide

Download the latest release from github (assets: zip file), unzip, and copy the font folder, containing the material design icons files, into your local project -- https://github.com/google/material-design-icons/releases

You only need to use the font folder from the archive: it contains the icons fonts in the different formats (for multiple browser support) and boilerplate css.

• Replace the source in the url attribute of @font-face, with the relative path to the iconfont folder in your local project, (where the font files are located) eg. url("iconfont/MaterialIcons-Regular.ttf")

@font-face {   font-family: 'Material Icons';   font-style: normal;   font-weight: 400;   src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */   src: local('Material Icons'),        local('MaterialIcons-Regular'),        url(iconfont/MaterialIcons-Regular.woff2) format('woff2'),        url(iconfont/MaterialIcons-Regular.woff) format('woff'),        url(iconfont/MaterialIcons-Regular.ttf) format('truetype');}.material-icons {  font-family: 'Material Icons';  font-weight: normal;  font-style: normal;  font-size: 24px;  /* Preferred icon size */  display: inline-block;  line-height: 1;  text-transform: none;  letter-spacing: normal;  word-wrap: normal;  white-space: nowrap;  direction: ltr;  /* Support for all WebKit browsers. */  -webkit-font-smoothing: antialiased;  /* Support for Safari and Chrome. */  text-rendering: optimizeLegibility;  /* Support for Firefox. */  -moz-osx-font-smoothing: grayscale;  /* Support for IE. */  font-feature-settings: 'liga';}

<i class="material-icons">face</i>

NPM / Bower Packages

Google officially has a Bower and NPM dependency option -- follow Material Icons Guide 1

Using bower : bower install material-design-icons --save

Using NPM : npm install material-design-icons --save

Material Icons : Alternatively look into Material design icon font and CSS framework for self hosting the icons, from @marella's https://marella.me/material-icons/

Note

It seems google has the project on low maintenance mode. The lastrelease was, at time of writing, 3 years ago!

There are several issues on GitHub regarding this, but I'd like torefer to @cyberalien comment on the issue Is this project actively maintained? #951 where it refers several community projects thatforked and continue maintaining material icons.

I'm building for Angular 4/5 and often working offline and so the following worked for me. First install the NPM:

npm install material-design-icons --save

Then add the following to styles.css:

@import '~material-design-icons/iconfont/material-icons.css';

The upper approaches does not work for me. I download the files from github, but the browser did not load the fonts.

What I did was to open the material icon source link:

https://fonts.googleapis.com/icon?family=Material+Icons

and I saw this markup:

    /* fallback */@font-face {  font-family: 'Material Icons';  font-style: normal;  font-weight: 400;  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');}.material-icons {  font-family: 'Material Icons';  font-weight: normal;  font-style: normal;  font-size: 24px;  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;}

I open the woff font url link https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

and download the woff2 file.

Then I replace the woff2 file path with the new one in material-icons.css

@font-face {  font-family: 'Material Icons';  font-style: normal;  font-weight: 400;  src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */  src: local('Material Icons'),       local('MaterialIcons-Regular'),       /* Old file: url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), */       /* load new file */        url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'),       url(iconfont/MaterialIcons-Regular.ttf) format('truetype');}

That makes thing works for me.