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

Answer 1

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

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

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.

hourglass_empty

phone