How can I download the material icon font?

Question

I am unable to download the material icon fonts. Can anyone share a working link? I am only using downloaded fonts.

Answer 1

The Material Icons Guide has everything you need.

All the Material icons are available on the GitHub page. You can download the icon font, along with the needed CSS file for use in webpages here:

• https://github.com/google/material-design-icons/tree/master/font

You can also use the icon font through Google Fonts using this code:

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

Answer 2

NOT all the Material icons are available on GitHub. Only the Regular Material Icon font is available. The Outlined, Round, Sharp, and Two-Tone fonts are NOT available. These fonts can be referenced, per the documentation. However, Google has not made these fonts available for download in order to self-host them.

Also, the Regular Material icon font appears to render some of the non-regular ligatures properly if suffixed with "_outline". This doesn't work for all icons. To be honest the material icons are very poorly implemented.

Here's some code for referencing the Material Icon fonts other than the Regular font:

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcel5euIg.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Icons Round';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconsround/v14/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmPq_HTTw.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Icons Sharp';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconssharp/v15/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvRImcycg.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Icons Two Tone';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconstwotone/v13/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0NjbrHg.woff2) format('woff2');
}

Answer 3

The fonts downloaded at the link provided above wasn’t working properly in desktop apps I use so I found another site for downloading the font that worked properly everywhere: https://materialdesignicons.com

Answer 4

Totally agree about this problem. I also spent a lot of time looking on how to host the non-regular fonts (outlined in my case). Either there's no documentation for it or it is hidden somewhere.. (example, this doc only relates to the Regular set: http://google.github.io/material-design-icons/#getting-icons).

What I ended up doing (till I can find a better solution):

1. I noticed that for online you need to specify the desired fonts (https://stackoverflow.com/a/61749083/3208034). Therefore I directly browsed that url like so: https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined
2. Note the url for 'Material Icons Outlined'. Download that woff2 file and give it a meaningful name: e.g. MaterialIcons-Outlined.woff2 (in my Angular app, this is under assets/fonts).
3. Copy-paste as required, the @font-face and other css code, changing the url to your local file (note below the comments I placed where to copy-paste). Note: the Material Regular css class is based on http://google.github.io/material-design-icons/#setup-method-2-self-hosting, but I assume there should be no problem to copy-paste that style too from the file browsed earlier in step #1.

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(assets/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(assets/fonts/MaterialIcons-Regular.woff2) format('woff2'),
    url(assets/fonts/MaterialIcons-Regular.woff) format('woff'),
    url(assets/fonts/MaterialIcons-Regular.ttf) format('truetype');
}

/* START PASTE HERE AND CHANGE URLS */
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(assets/fonts/MaterialIcons-Outlined.woff2) format('woff2');
}
/* END PASTE HERE AND CHANGE URLS */

.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;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* START PASTE HERE */
.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  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;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
/* END PASTE HERE */

4. Use the font like so:

<mat-icon class="material-icons-outlined">forum</mat-icon>
<i class="material-icons-outlined">forum</i>