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

This article explains for Angular, thought might be helpful for someone, https://thecodeframework.com/host-google-material-icon-fonts-locally-in-angular-in-5-simple-steps/ — Gagan, Jul 21 '20 at 03:09

score 154 · Accepted Answer · edited Sep 29 '20 at 05:18

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 would you do this for a phone GAP app where you would not have a domain? — Luke Tan, May 17 '16 at 10:08
target your local folder in the source url of @font-face : url( "iconfont/MaterialIcons-Regular.woff2" -- updated answer — bfmags, May 17 '16 at 10:36
Hey, Can you please make an updated answer of this. I have downloaded my mdl icons with npm. — TheBAST, Dec 10 '17 at 05:26
Solved my problem … I just wanted to note out that we only need the `iconfont` folder from the whole archive. — securecurve, Aug 16 '18 at 10:01
for this type of "move cdn resource to be served locally" it usually would pay off to have a solid over 3000 requests average response time data BEFORE and AFTER the change - you would be surprised how-often it is not worth it, regardless of your effort to achieve it ... — Yordan Georgiev, Nov 02 '18 at 13:37

score 56 · Answer 2 · answered Jan 16 '18 at 07:00

56

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

answered Jan 16 '18 at 07:00

bownie

1,490
13
20

14

when call "npm install" wait wait wait lol... but works after long time – Sergio Cabral May 27 '18 at 19:47
2

@SergioCabral Luckily you made the comment about waiting, cause there were about 5 times I thought this install isn't going anywhere... :) – Alfa Bravo Oct 03 '18 at 12:59
1

Thank You Loved It This Is Best Solution Thank You <3 – Ali Jamal Nov 08 '18 at 17:21
Working for me also... :) – Aupr Jun 18 '19 at 09:41
4

any idea how to add outlined icons? – wutzebaer Jan 14 '20 at 08:06
I followed the npm directions above and all works great, except I am missing two icons: toggle_off and toggle_on. I suspect the npm repo might not be up to date? – Reuben Sivan May 28 '20 at 23:00
3

It turns out the google repository is not well maintained. The solution I found is to use npm install material-design-icons-iconfont, a fork of the google repository with many fixes and performance improvements. – Reuben Sivan May 29 '20 at 00:41
When I use npm install it takes a long time, and then adds no new files to my AspNetCore project. Did anyone have a similar problem? – Christoph B Sep 27 '21 at 13:08

score 28 · Answer 3 · answered Jul 03 '17 at 07:20

28

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.

answered Jul 03 '17 at 07:20

Kaloyan Stamatov

3,702
1
19
24

Thanks! I had the same issue and this fixed it for me. – David Aug 25 '17 at 10:20
I solve my issue with this approach, but later I found another git repo, from where I get the proper release. – Kaloyan Stamatov Aug 25 '17 at 10:25
1

@ Kaloyan Stamatov would be nice to share that git repo.. since lot of people have issue with outdated official repo :) – Grashopper May 06 '19 at 12:30
@Grashopper, I do not have it anymore. Sorry – Kaloyan Stamatov May 07 '19 at 06:49
1

more up to date in 2019, this solution worked for me as well. – compt Jul 16 '19 at 19:24
this is the only way to get the latest icons that I could find... – BoDeX Jul 14 '20 at 07:19
in 8/2020 latest v55 link: https://fonts.gstatic.com/s/materialicons/v55/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2 – Timelot Aug 21 '20 at 10:38
i had to install npm package `npm i material-design-icons` then edited: `apps\appName\src\styles.css` and added the content of the file: `\node_modules\material-design-icons\iconfontmaterial-icons.css` but i had to change the fonts path to be of this format: `url('~material-design-icons/iconfont/MaterialIcons-Regular.woff2')` (added the qutes ' and prefix: `~material-design-icons/iconfont/` before each file name ) – Shaybc Nov 21 '21 at 23:22
@Shaybc check the date on the npm package. It's old! It's best to get the fonts directly from Google fonts as Kaloyan says above. Or you can get them from GitHub. – moefinley Mar 14 '22 at 15:38

score 25 · Answer 4 · answered Jun 05 '20 at 00:45

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

Simple and clean implementation - works perfectly thank you! As the most current and efficient solution, this should be be the accepted answer... — Mike Goodstadt, Sep 27 '20 at 07:41
Is there a way that I can use face offline ie., without changing to — Arokia Lijas, Feb 26 '21 at 05:28
I couldn't agree more with @Mike. This is the best implementation. Thank you for sharing! — omostan, Mar 05 '21 at 09:20

Vladislav Kosovskikh · Answer 5 · 2017-07-15T19:04:20.703

17

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'

edited Jul 15 '17 at 19:04

answered Jul 15 '17 at 18:53

Vladislav Kosovskikh

405
4
12

8

I don't recommend doing this, this repo is far too big, use one desc. below https://www.npmjs.com/package/material-design-icons-iconfont I also noticed that browser will cache https://fonts.googleapis.com/icon?family=Material+Icons and it'll work in the offline mode. Checkout https://keemor.github.io/#/ – keemor Oct 17 '17 at 13:44
I am newbie in npm can you elaborate `import materialIcons from 'material-design-icons/iconfont/material-icons.css'` . We adding this line to where? app.js or somewhere else. I am using framework7 with Vue and I tried. It didn't work for me. – Suat Atan PhD Nov 06 '17 at 11:53
@SuatAtanPhD you add this import like any other style imports. If you use webpack you need something like style-loader, css-loader and you can place this import anywhere in your js code, for example in index.js or app.js etc. – Vladislav Kosovskikh Nov 06 '17 at 19:22
1

Such approach is recommended for building an corporate web application which may work in internal network without access to Internet – Yurii Bratchuk Feb 20 '18 at 15:26

score 16 · Answer 6 · edited Nov 06 '17 at 13:24

16

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

edited Nov 06 '17 at 13:24

Suat Atan PhD

1,082
11
25

answered Oct 02 '17 at 16:22

Md. Harun Or Rashid

1,860
3
21
35

Employing the _material-design-icons-iconfont_ package works even with the Angular's standard `mat-icon` component. Thus the transition is seamless. – Yuri Dec 20 '18 at 09:53
1

This is the solution that worked for me, except the stylesheet link in index.html didn't work - I had to add an import into my Styles.scss file: `@import"../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";` Then my locally hosted icons leapt into life – Ade Oct 18 '19 at 07:25
Also, importing into your scss means that it is a build time dependency and you can NPM install --dev to not make it part of the prod node environment footprint. – steve dunning Jan 13 '21 at 19:14

score 9 · Answer 7 · answered Jan 14 '19 at 08:58

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

I'm having a problem with PWA. Icons are working while you are in browser but once you add shortcut on home screen and run the app icons are not showing. — Wlada, Jun 24 '19 at 14:47

score 7 · Answer 8 · answered May 13 '18 at 02:21

7

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

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

answered May 13 '18 at 02:21

Roman

15,278
11
75
80

this package not exist any more – yehonatan yehezkel May 29 '19 at 12:53
with angular cli, do npm install material-design-icons and then add css in angular.json -> architect->build->styles – Wlada Jun 06 '19 at 11:07

abhinav1602 · Answer 9 · 2020-08-13T14:11:33.247

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

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

@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)

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.

Raphaël Balet · Answer 10 · 2022-02-10T15:27:05.383

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

Download the needed font from their repo. you can ignore the .codepoints extension. Be aware, they do not have .woff2 and .woff type anymore, but .ttf or .otf works just fine.
Add them to your assets folder
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';
}

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

score 4 · Answer 11 · edited Jun 29 '20 at 17:28

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.

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

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

score 3 · Answer 12 · edited Jun 27 '18 at 21:50

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

Wlada · Answer 13 · 2019-06-27T09:28:01.937

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"
            ],

score 2 · Answer 14 · answered May 09 '17 at 11:33

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

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

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.

score 2 · Answer 15 · answered Oct 24 '17 at 10:40

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.

I got this to work also with some small changes. I changed "workboxSW" to "workbox". I changed "router" to "routing" and added this code into my sw_config.js file that gets generated when using the workbox cli wizard. — Jason Allshorn, Jan 15 '19 at 18:35

score 1 · Answer 16 · edited Jun 30 '20 at 05:43

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.

Doesn't work on all browsers, see this SO answer for more information: https://stackoverflow.com/questions/11002820/why-should-we-include-ttf-eot-woff-svg-in-a-font-face — xaviert, Oct 19 '18 at 08:31

score 1 · Answer 17 · answered Feb 16 '21 at 18:03

1

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

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

answered Feb 16 '21 at 18:03

Asanka Sampath

457
3
12

score 0 · Answer 18 · answered Nov 04 '19 at 10:34

0

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

answered Nov 04 '19 at 10:34

Ahmet Arslan

4,474
1
29
32

score 0 · Answer 19 · answered Jul 08 '20 at 22:14

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 !

Arekhandia Harry · Answer 20 · 2022-04-17T02:12:57.593

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

score -1 · Answer 21 · edited Oct 13 '19 at 13:07

-1

npm install material-design-icons

and

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

worked also for me with Angular Material 8

edited Oct 13 '19 at 13:07

N3R4ZZuRR0

2,388
4
16
32

answered Oct 13 '19 at 09:32

side105

1
1

score -1 · Answer 22 · answered Jan 22 '20 at 14:24

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>

How to host material icons offline?

22 Answers22

Use material-design-icons-iconfont

Install via `npm`

Demo page

To Avoid

To use

STEP 1

STEP 2

Example

STEP 3

Linked

How to host material icons offline?

22 Answers22

Use material-design-icons-iconfont

Install via npm

Demo page

To Avoid

To use

STEP 1

STEP 2

Example

STEP 3

Linked

Install via `npm`