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

<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

Answer 1

To Avoid

npm i material-design-icons

Google isn't publishing any new version to their npm repository, so please avoid using the npm i material-design-icons since the last publish was 5 years ago.

To use

1. Find the icon size you wish to use
2. Past the url in your search bar example
3. You'll find here a src, copy again this url inside your search bar -> this will download a file
4. Add it to your assets folder
5. Into a css file, do add the following

@font-face {
  font-family: 'Material Icons';
  font-weight: 400;
  font-style: normal;
  src: local('Material Icons'), local('MaterialIcons-Regular'),
    url('/assets/fonts/MaterialIcons-Regular.ttf') format('truetype');
}

.material-icons {
  display: inline-block;
  font-family: 'Material Icons';
  font-size: 24px; /* Preferred icon size */
  font-weight: normal;
  line-height: 1;
  font-style: normal;
  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';
}

4. Then add the .material-icons class

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

Angular users do not need to add .material-icons if they already use mat-icon

Outline & Regular at the same time

Both, outline & regular one?
Here is the step.

I'm using the scss @extend method for that purpose because I'm lazy.

@font-face {
  font-family: 'Material Icons Outlined';
  font-weight: 400;
  font-style: normal;
  src: local('Material Icons Outlined'), local('MaterialIconsOutlined-Regular'),
    url('/assets/fonts/MaterialIconsOutlined-Regular.otf') format('truetype');
  font-display: fallback;
}

.material-icon {
  // Same content as the previous example without the `font-family`
}

.material-icons {
  @extend .material-icon;
  font-family: 'Material Icons';
}

.material-icons-outlined {
  @extend .material-icon;
  font-family: 'Material Icons Outlined';
}

<mat-icon class="material-icons-outlined" svgIcon="dark_mode-outline"></mat-icon>

Answer 2

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.

Answer 3

Here's how you can automate downloading the latest font and subsetting it from a Node.js script.

1. Downloading

Google API ignores requests which don't have a proper user-agent header. We can use user-agents to bypass the restriction. Please, don't abuse it :)

Go to Material icons, choose one and copy the link HTML that contains the path to the CSS file. It looks like this:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

You can actually edit the parameters here to get the exact font that you want. This API should be stable enough.

Now, we need to download this CSS file and parse the URL of the actual binary font file. This function can do it for you, just give it the link string and the path where to save the file:

const downloadFont = async (googleFontLink, fullFontPath) => {
  const headers = {
    Accept: '*/*',
    'Content-Type': 'font/woff2',
    'User-Agent': new UserAgent().toString(),
  };
  const cssUrl = googleFontLink.match(/href="(.*?)"/)[1];
  const fontCssRes = await axios.get(cssUrl, { headers });
  const fontUrl = (fontCssRes.data.match(/url\((.*?)\)/) || [])[1];

  const fontFileRes = await axios.get(fontUrl, {
    headers,
    responseType: 'stream',
  });
  await fontFileRes.data.pipe(fs.createWriteStream(fullFontPath));

  const delay = time => new Promise(r => setTimeout(r, time));
  await delay(1000);
};

2. Mapping the ligatures

Fontkit will help here. It can decode the woff2 file. You just need a little script to extract the ligatures. Something like this:

const getLigatures = () => {
  const result = {};
  const font = fontkit.openSync(fullFontPath);

  const lookupList = font.GSUB.lookupList.toArray();
  const lookupListIndexes = font.GSUB.featureList[0].feature.lookupListIndexes;

  lookupListIndexes.forEach(index => {
    const subtables = lookupList[index].subTables;

    subtables.forEach(subTable => {
      const leadingCharacters = [];
      subTable.extension.coverage.rangeRecords.forEach(coverage => {
        for (let i = coverage.start; i <= coverage.end; i++) {
          let character = font.stringsForGlyph(i)[0];
          leadingCharacters.push(character);
        }
      });
      const ligatureSets = subTable.extension.ligatureSets.toArray();

      ligatureSets.forEach((ligatureSet, ligatureSetIndex) => {
        const leadingCharacter = leadingCharacters[ligatureSetIndex];

        ligatureSet.forEach(ligature => {
          const character = font.stringsForGlyph(ligature.glyph)[0];
          if (!character) return;

          const ligatureText =
            leadingCharacter +
            ligature.components.map(x => font.stringsForGlyph(x)[0]).join('');
          const code = character
            .charCodeAt(0)
            .toString(16)
            .toLowerCase();
          const iconName = ligatureText.toLowerCase();

          result[iconName] = code;
        });
      });
    });
  });

  return result;
};

You can filter this dictionary to get the codes of those icons that you actually want. You just need to pass these codes to the script that will create a subset.

3. Subsetting

In my project there's 155 icons. The entire font is 3268. Why would I host the whole thing?

I was not able to find a javascript library that can properly subset and save the result in woff2. But there's a Python script fonttools that does it just fine.

You need to install Python, make sure it works in the terminal and install fonttools with a couple of dependencies:

pip install fonttools zopfli brotli

Then you build the console command like this:

const getCommand = unicodes => {
  return `fonttools subset ${fullFontPath} \
  --unicodes=5f-7a,30-39,${unicodes.join(',')} \
  --no-layout-closure \
  --output-file=${resultFontPath} \
  --flavor=woff2`;
};

...and run it with child_process.exec.

Answer 4

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.

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

---

Answer 5

The answers here are all old. In 2023 you want material-icons npm package NOT material-design-icons. It's much better maintained and automatically updated.

npm install material-icons --save

It's one line of code to get it working:

import 'material-icons/iconfont/material-icons.css';

OR

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

There are other alternatives to get it working but see the linked docs for more.

Answer 6

Adding this in case it helps someone... This might not work for your use case, but it might work for someone. I have an offline computer where I use an app that uses materialize. I was also trying to solve this problem, but that github repo is huge, and I was having a difficult time following all the instructions. Additionally, the <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> tag was slowing the opening of my app on the offline computer, as it kept trying to download that file, but couldn't.

Here is what I did (working example at the bottom of this comment)

1. Download the file at https://fonts.googleapis.com/icon?family=Material+Icons and store it as a local css file in your website directory. This file will require one modification, explained in step 3.
2. Add a <link> tag to index.html pointing to the file you saved in step 1. (For example, I saved https://fonts.googleapis.com/icon?family=Material+Icons to assets/css/materialize_offline_files/materialize-icons.css in my website directory, then added this to index.html: <link href="assets/css/materialize_offline_files/materialize-icons.css" rel="stylesheet"> rel="stylesheet">.) Note: Make sure to add this link tag before your materialize.css imports.
3. Modification to file from step 1. If you look at the file at https://fonts.googleapis.com/icon?family=Material+Icons, you'll find this line of css code for the fall back font: src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');. Download the file at that src url, https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2, save it to the same directory as materialize_icons.css (the file from step 1), and change that line of code to: src: url("flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');

Working example (4 files):

index.html

<!DOCTYPE html>
<html>
<head>
    <link href="assets/css/materialize_offline_files/materialize-icons.css" rel="stylesheet">
    <link href="assets/css/materialize.min.css" rel="stylesheet">
</head>
<body>
    <button class="btn waves-effect waves-light">Hello!
            <i class="material-icons right">send</i>
    </button>
</body>
</html>

assets/css/materialize_offline_files/materialize-icons.css

/*
 * File downloaded from https://fonts.googleapis.com/icon?family=Material+Icons
 * with slight modification (src url of fallback font)
 */

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  /**src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');*/
  src: url("flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
  /**
   * flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 is the file
   * downloaded from 
   * https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2
   * NOTE:: css src url attributes are relative to the css file,
   * so store flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2
   * IN THE SAME DIR as this css file, for that modification to work.
   */
}

.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;
}

Finally (remaining 2 files), make sure you have the files:

• assets/css/materialize.min.css (download it from https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css)
• assets/css/materialize_offline_files/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 (download it from https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2

I thought this would just eliminate the problem the call to fonts.googleapis.com slowing down my app, but actually the few icons I use are actually showing up on the offline computer now. I'm not sure if it will work for all the icons, but it is working for me.

Answer 7

I chose a lazy solution with apache to evade dissuasions:

<link href="https://MYHOST/gfonts/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://MYHOST/gfonts/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

Add small apache plugin

a2enmod substitute

And in my apache config

AddOutputFilterByType INFLATE;SUBSTITUTE;DEFLATE text/html text/plain text/xml text/css
Substitute "s|https://fonts.gstatic.com/|/gsfonts/|i"
SSLProxyEngine on
ProxyPass "/gfonts/"  "https://fonts.googleapis.com/"
ProxyPassReverse "/gfonts/"  "https://fonts.googleapis.com/"
ProxyPass "/gsfonts/"  "https://fonts.gstatic.com/"
ProxyPassReverse "/gsfonts/"  "https://fonts.gstatic.com/"

Answer 8

While I was also facing this same challenge on my angular material project, I came up with a working offline solution. save all the details.

After downloading the resource, just follow these steps on the README.md file

STEP 1

Copy the distribution into your project

STEP 2

import the stylesheets in your angular.json imports array

Example

`angular.json [
        {
            style[
                "css/material.css", "css/icons.css"
            ]
        } `

STEP 3

You should see your icons appear offline after your next auto reload.

Optionally, you can comment or take out this line https://fonts.gstatic.com https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap https://fonts.googleapis.com/icon?family=Material+Icons from your index.html file.

HAPPYCODING :)

I created an offline repository for ngMatIcons you can download it from this link. :)

Answer 9

I solved it using this package (@mdi/font) and importing it on main.js:

import '@mdi/font/css/materialdesignicons.css'

Answer 10

I have tried to compile everything that needs to be done for self-hosting icons in my answer. You need to follow these 4 simple steps.

1. Open the iconfont folder of the materialize repository

   link- https://github.com/google/material-design-icons/tree/master/iconfont

2. Download these three icons files ->

   MaterialIcons-Regular.woff2 - format('woff2')

   MaterialIcons-Regular.woff - format('woff')

   MaterialIcons-Regular.ttf - format('truetype');

   Note- After Download you can rename it to whatever you like.

3. Now, go to your CSS and add this code

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

---

Note : The address provided in src:url(...) should be with respect to the 'CSS File' and not the index.html file. For example it can be src : url(../myicons/MaterialIcons-Regular.woff2)

---

4. You are ready to use now and here is how it can be done in HTML

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

Click here to see all the icons that can be used.

Answer 11

Kaloyan Stamatov method is the best. First go to https://fonts.googleapis.com/icon?family=Material+Icons. and copy the css file. the content look like this

/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.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;
}

Paste the source of the font to the browser to download the woff2 file https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 Then replace the file in the original source. You can rename it if you want No need to download 60MB file from github. Dead simple My code looks like this

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(materialIcon.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;
}

while materialIcon.woff2 is the downloaded and replaced woff2 file.

Answer 12

2019 Update here:

To self host your material icons, the Regular ones, Rounded, Sharp, all the variants. Go get them from this repo: https://github.com/petergng/material-icon-font

For some reason I dont know why these fonts are not easily accessible from Google repositories.

But here you go.

After downloading the package, go to bin folder and you'll see the four variants. Of course, it is up to you to use whichever.

To use them, create a css file and

1. Generate a font face for each variant you need:

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/regular/Material-Icons-Regular.eot); /* For IE6-8 */
    src: local('Material-Icons-Regular'),
    url(./icons/regular/Material-Icons-Regular.woff2) format('woff2'),
    url(./icons/regular/Material-Icons-Regular.woff) format('woff'),
    url(./icons/regular/Material-Icons-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/round/Material-Icons-Round.eot); /* For IE6-8 */
    src: local('Material-Icons-Round'),
    url(./icons/round/Material-Icons-Round.woff2) format('woff2'),
    url(./icons/round/Material-Icons-Round.woff) format('woff'),
    url(./icons/round/Material-Icons-Round.svg) format('svg'),
    url(./icons/round/Material-Icons-Round.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Sharp';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/sharp/Material-Icons-Sharp.eot); /* For IE6-8 */
    src: local('Material-Icons-Sharp'),
    url(./icons/sharp/Material-Icons-Sharp.woff2) format('woff2'),
    url(./icons/sharp/Material-Icons-Sharp.woff) format('woff'),
    url(./icons/sharp/Material-Icons-Sharp.svg) format('svg'),
    url(./icons/sharp/Material-Icons-Sharp.ttf) format('truetype');
}

The url will link to where the icons are located in your project.

2. Now lets register the icon classes:

.material-icons-outlined, .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;
}

This will make both .material-icons-outlined, and .material-icons classes use the same defaults. If you want to to use .material-icons-sharp, just append it to the two class names.

3. Finally, let us plug-in the font face you pulled in from step 1.

.material-icons {
    font-family: 'Material Icons';
}

.material-icons-outlined {
    font-family: 'Material Icons Outline';
}

Again, to use more variant, like Sharp, just add its block like the two above.

Once done...go to your html and use your newly minted icons.

<i class="material-icons-outlined">hourglass_empty</i>

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

Answer 13

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
   <i class="material-icons">face</i>
   <i class="material-icons md-48">face</i>
   <i class="material-icons md-light md-inactive">face</i>
   
   // Using Angular Material's <mat-icon> tag
   <mat-icon>face</mat-icon>
   <mat-icon>add_circle</mat-icon>
   <mat-icon>add_circle_outline</mat-icon>
   

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.

Answer 14

Added this to the web config and the error went away

<system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> 
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <remove fileExtension=".woff2" /> 
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

Answer 15

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 16

npm install material-design-icons

and

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

worked also for me with Angular Material 8

Answer 17

With angular cli

npm install angular-material-icons --save

or

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

material-design-icons-iconfont is the latest updated version of the icons. angular-material-icons is not updated for a long time

Wait wait wait install to be done and then add it to angular.json -> projects -> architect -> styles

 "styles": [
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "src/styles.scss"
        ],

or if you installed material-desing-icons-iconfont then

"styles": [
              "node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ],

Answer 18

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 19

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 20

My recipe has three steps:

1. to install material-design-icons package

   npm install material-design-icons
   

2. to import material-icons.css file into .less or .scss file/ project

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

3. to include recommended code into the reactjs .js file/ project

   <i className='material-icons' style={{fontSize: '36px'}}>close</i>
   

Answer 21

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';

Answer 22

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 23

The question title asks how to host material icons offline but the body clarifies that the objective is to use the material icons offline (emphasis mine).

Using your own copy of the material icons files is a valid approach/implementation. Another, for those that can use a service worker is to let the service worker take care of it. That way you don't have the hassle of obtaining a copy and keeping it up to date.

For example, generate a service worker using Workbox, using the simplest approach of running workbox-cli and accepting the defaults, then append the following text to the generated service worker:

workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)',
workboxSW.strategies.cacheFirst({
  cacheName: 'googleapis',
  cacheExpiration: {
    maxEntries: 20
  },
  cacheableResponse: {statuses: [0, 200]}
})
);

You can then check it was cached in Chrome using F12 > Application > Storage > IndexedDB and look for an entry with googleapis in the name.

Answer 24

If you use webpack project, after

npm install material-design-icons --save

you just need to

import materialIcons from 'material-design-icons/iconfont/material-icons.css'

Answer 25

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.

Answer 26

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.