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

Use material-design-icons-iconfont

Full disclosure, I'm the author of this package

Google's material-design-icons project is on low maintenance and out of date for a while. There's a gap between the version in https://material.io/icons/ and the version in material-design-icons.

I've created material-design-icons-iconfont to address these major issues:

• material-design-icons jams npm install - all irrelevant svg/xml/... files has been removed
• Font files are always up-to-date straight from Google Fonts CDN
• Support for scss

---

Install via npm

npm install material-design-icons-iconfont --save

It depends on how you pack your web application (webpack/gulp/bower/...), you'll need to import the .css/.scss file (and might change the relative fonts path)

---

Import Using SCSS

Import in one of your sass files

$material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/';
@import '~material-design-icons-iconfont/src/material-design-icons';

Later on, reference your desired icon <i class="material-icons"> + icon-id + </i>

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

• read the full instructions on material-design-icons-iconfont for more import methods

---

Demo page

It comes with a light demo page to assist searching and copy-pasting fonts

Answer 2

After you have done npm install material-design-icons, add this in your main CSS file:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(~/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(~material-design-icons/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';
}

Answer 3

Install npm package

npm install material-design-icons --save

Put css file path to styles.css file

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

Answer 4

On http://materialize.com/icons.html the style header information you include in the page,you can go to the actual Hyperlink and make localized copies to use icons offline.

Here's how.NB: You will download two Files in all icon.css and somefile.woff.

1. Go to the following URL as required in the header

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> .

Save page as whatever_filename.css. Default is icon.css

2. Look for a line like this

src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)

3. Visit the URL that has .woff ending it

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2 . Your browser will automatically download it. Save it in your CSS folder.

4. You should now have the two files icon.css and 2fcrYFNa....mY.wof22, save them both in your css. Now make edits in your css header location to the icon.css in your directories. Just make sure the .woff2 file is always in the same folder as the icon.css. Feel free to edit the long file names.

Answer 5

This may be an easy Solution

---

Get this repository that is a fork of the original repository Google published.

Install it with bower or npm

bower install material-design-icons-iconfont --save

npm install material-design-icons-iconfont --save

Import the css File on your HTML Page

<style>
  @import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
</style>

or

<link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

Test: Add an icon inside body tag of your HTML File

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

If you see the face icon, you are OK.

If does not work, try add this .. as prefix to node_modules path:

<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

Answer 6

By the way there is video available on youtube with step by step instructions.

https://youtu.be/7j6eOkhISzk

1. These are the steps. Download materialize icon package from https://github.com/google/material-design-icons/releases

2. Copy the icon-font folder and rename it to icons.

3. Open the materialize.css file and update the following paths:

a. from url(MaterialIcons-Regular.eot) to url(../fonts/MaterialIcons-Regular.eot) b. from url(MaterialIcons-Regular.woff2) format('woff2') to url(../fonts/MaterialIcons-Regular.woff2) format('woff2') c. from url(MaterialIcons-Regular.woff) format('woff') to url(../fonts/MaterialIcons-Regular.woff) format('woff') d. from url(MaterialIcons-Regular.ttf) format('truetype') to url(../fonts/MaterialIcons-Regular.ttf) format('truetype')

3. Copy the materialize-icon.css to your css folder and reference it in your html file.

Everything will work like magic !