• Android Material Design Icons
• Material Designs Icons
• Kudos Icon
• Kudos Website

My apologies if this is a very simple question, but how do you use google material icons without a

?

I would like my app to be able to display the icons even when the user does not have an internet connection

Design a fitness app and motivational tool with 15+ screens, an onboarding flow, and a variety of icons, buttons, colors, and typography. Also includes screen designs, repeat grid elements and overlays, social aspects, and timed transitions. Material Design Icons. Iconography is tricky, simply because it can be ambiguous. But in material design, the visual side of user experience is critical, and it’s highly encourage that icons are used extensively. In fact, Google has open-sourced a comprehensive material design icon set. 6000+ Material Design Icons based on 24px grid; 32 Categories; 8 File Formats (AI, EPS, PDF, JPG, SVG, PSD, CSH, PNG) Ready to use png and svg files with line and solid icons.

Luke TanLuke Tan

14 Answers

Method 2. Self hostingDeveloper Guide

Download the latest release from github (assets: zip file), unzip, and copy the iconfont 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 iconfont 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')

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

bfmagsbfmags

I'm building for Angular 4/5 and often working offline and so the following worked for me. First install the NPM:

Then add the following to styles.css:

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:

and I saw this markup:

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

That makes thing works for me.

Kaloyan StamatovKaloyan Stamatov

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

Import the css File on your HTML Page

or

Test: Add an icon inside body tag of your HTML File

If you see the face icon, you are OK.

If does not work, try add this .. as prefix to node_modules path:

Md. Harun Or RashidMd. Harun Or Rashid

My recipe has three steps:

1. to install material-design-icons package

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

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

RomanRoman

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

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

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

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:

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

After you have done npm install material-design-icons, add this in your main CSS file:

Paul Roub

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

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

Later on, reference your desired icon <i> + icon-id + </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

Jossef HarushJossef Harush

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

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.

With angular cli

or

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

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

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

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

}

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

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 and1. Generate a font face for each variant you need:

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>hourglass_empty</i>

<i>phone</i>

Not the answer you're looking for? Browse other questions tagged javascripthtml5cordovamaterialize or ask your own question.

My apologies if this is a very simple question, but how do you use google material icons without a

?

I would like my app to be able to display the icons even when the user does not have an internet connection

Luke TanLuke Tan

14 Answers

Method 2. Self hostingDeveloper Guide

Download the latest release from github (assets: zip file), unzip, and copy the iconfont 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 iconfont 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')

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

bfmagsbfmags

I'm building for Angular 4/5 and often working offline and so the following worked for me. First install the NPM:

Then add the following to styles.css:

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:

and I saw this markup:

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

That makes thing works for me.

Kaloyan StamatovKaloyan Stamatov

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

Import the css File on your HTML Page

or

Test: Add an icon inside body tag of your HTML File

If you see the face icon, you are OK.

If does not work, try add this .. as prefix to node_modules path:

Md. Harun Or RashidMd. Harun Or Rashid

My recipe has three steps:

1. to install material-design-icons package

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

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

RomanRoman

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

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

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

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:

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

After you have done npm install material-design-icons, add this in your main CSS file:

Paul Roub

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

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

Later on, reference your desired icon <i> + icon-id + </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

Jossef HarushJossef Harush

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

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.

With angular cli

Android Material Design Icons

or

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

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

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

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

}

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

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 and1. Generate a font face for each variant you need:

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

Material Designs Icons

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

Kudos Icon

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

Kudos Website

<i>hourglass_empty</i>

<i>phone</i>

Not the answer you're looking for? Browse other questions tagged javascripthtml5cordovamaterialize or ask your own question.