My apologies if this is a very simple question, but how do you use google material icons without a
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
?
I would like my app to be able to display the icons even when the user does not have an internet connection
Method 2. Self hosting Developer Guide
Release 4 changed things a bit, please investigate recommended formats and hosting solution.
Download release 3.0.2 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.
@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 last release was, at time of writing, 3 years ago!
There are several issues on GitHub regarding this, but I'd like to refer to @cyberalien comment on the issue
Is this project actively maintained? #951
where it refers several community projects that forked and continue maintaining material icons.