javascripthtmlcordovamaterialize

How to host material icons offline?


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


Solution

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