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
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.
@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.