How to Host Material Icons Offline

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

---

How to host Material Design icons offline?

I think you downloaded wrong files from somewhere. This is the path that you have to download correct fonts from: https://github.com/google/material-design-icons/tree/master/iconfont or use the one in my GH repo that worked for you already.

Also you need to call only one css in your html (php) file, like this:

<link rel="stylesheet" href="material-fonts.css" />

hth, k

Should importing material design icons work offline with my current code?

You still have a link to https://fonts.googleapis.com/icon?family=Material+Icons inside the above code.

The only link for the icons in the HTML header I have is:

<link href="fonts/google-material/material.css" rel="stylesheet" />

The material.css file has the following definition:

@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;
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  width: 1em;
 /* height: 1em;
  line-height: 1;*/
  /* 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';
}

In HTML I use the &#x[code]; definition and the icons are displayed offline in all browsers like a charm:

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

I got the library from: Material icons guide

Vuetify / Offline icons

Vuetify address this in their documentation:

https://vuetifyjs.com/en/framework/icons#installing-fonts

Essentially:

npm install material-design-icons-iconfont -D

Then:

// main.js
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  iconfont: 'md'
})

How to include material icon library in Angular?

using this link resolved my problem(https://www.npmjs.com/package/material-icons)

npm i material-icons

styles.css

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

---

Related Topics