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     lt link href  https   fonts googleapis com icon family Material Icons  rel  stylesheet  gt        I would like my app to be able to display the icons even when the user does not have an internet connection

User · Answer

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

User · Answer

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   lt style gt     import url  node modules material-design-icons-iconfont dist material-design-icons css     lt  style gt    or   lt link rel  stylesheet  href  node modules material-design-icons-iconfont dist material-design-icons css  gt    Test  Add an icon inside body tag of your HTML File   lt i class  material-icons  gt face lt  i gt    If you see the face icon  you are OK   If does not work  try add this    as prefix to node modules path    lt link rel  stylesheet  href     node modules material-design-icons-iconfont dist material-design-icons css  gt

User · Answer

I solved it using this package   mdi font  and importing it on main js  import   mdi font css materialdesignicons css

User · Answer

My recipe has three steps    to install material-design-icons package  npm install material-design-icons  to import material-icons css file into  less or  scss file  project   import    node modules material-design-icons iconfont material-icons css    to include recommended code into the reactjs  js file  project   lt i className  material-icons  style   fontSize   36px    gt close lt  i gt

User · Answer

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

User · Answer

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  lt i class  material-icons  gt    icon-id    lt  i gt     lt i class  material-icons  gt contact support lt  i gt     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

User · Answer

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

User · Answer

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

User · Answer

npm install material-design-icons   and   import   material-design-icons iconfont material-icons css     worked also for me with Angular Material 8

User · Answer

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  quot iconfont MaterialIcons-Regular ttf quot      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         lt i class  quot material-icons quot  gt face lt  i gt    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

User · Answer

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

User · Answer

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  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   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   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   lt i class  quot material-icons-outlined quot  gt hourglass empty lt  i gt    lt i class  quot material-icons quot  gt phone lt  i gt

User · Answer

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    Go to the following URL as required in the header    lt link href  https   fonts googleapis com icon family Material Icons  rel  stylesheet  gt     Save page as whatever filename css  Default is icon css   Look for a line like this    src  local  Material Icons    local  MaterialIcons-Regular    url https   fonts gstatic com s materialicons v22 2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY woff2     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    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

User · Answer

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

User · Answer

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   Open the iconfont folder of the materialize repository link- https   github com google material-design-icons tree master iconfont  Download these three icons files - gt  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   Now  go to your CSS and add this code    x000D   x000D   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     x000D   x000D   x000D    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    You are ready to use now and here is how it can be done in HTML   x000D   x000D   lt i class  material-icons  gt face lt  i gt  x000D   x000D   x000D   Click here to see all the icons that can be used

User · Answer

Added this to the web config and the error went away   lt system webServer gt       lt staticContent gt         lt remove fileExtension   woff    gt          lt mimeMap fileExtension   woff  mimeType  application x-font-woff    gt         lt remove fileExtension   woff2    gt          lt mimeMap fileExtension   woff2  mimeType  application font-woff2    gt       lt  staticContent gt

User · Answer

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

User · Answer

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    Install the package  npm install material-icons-font --save 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         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    Use the icons in the HTML file of your project      Using icon tag  lt i class  material-icons  gt face lt  i gt   lt i class  material-icons md-48  gt face lt  i gt   lt i class  material-icons md-light md-inactive  gt face lt  i gt      Using Angular Material s  lt mat-icon gt  tag  lt mat-icon gt face lt  mat-icon gt   lt mat-icon gt add circle lt  mat-icon gt   lt mat-icon gt add circle outline lt  mat-icon gt     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

User · Answer

By the way there is video available on youtube with step by step instructions  https   youtu be 7j6eOkhISzk  These are the steps  Download materialize icon package from https   github com google material-design-icons releases  Copy the icon-font folder and rename it to icons   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    Copy the materialize-icon css to your css folder and reference it in your html file   Everything will work like magic

User · Answer

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

[javascript] How to host material icons offline?

Examples related to javascript

Examples related to html

Examples related to cordova

Examples related to materialize