0

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

4 Answers 4

8

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:

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">
3
  • It's possible to use in illustrator? as a font
    – nagha
    Sep 19, 2016 at 11:00
  • You should be able to use the TTF font file locally (and in Illustrator), yes. You can download the icons as SVG too though which may be better for working in Illustrator.
    – Cai
    Sep 19, 2016 at 11:16
  • Unfortunately the files aren't maintained anymore... Dec 24, 2019 at 22:04
4

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');
}
2
  • Welcome to GDSE! You had two answers so I've merged them into a single one. Thank you for your contribution!
    – curious
    Dec 31, 2019 at 0:49
  • Indeed, it is strongly recommended to stick to the legacy, non-variable classic icon font files in the /font/ path. The outlined, round, sharp and so forth styles are almost guaranteed to fail on some devices due to lack of support.
    – andreszs
    Nov 2, 2022 at 21:58
1

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

0

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 */
  1. Use the font like so:
<mat-icon class="material-icons-outlined">forum</mat-icon>
<i class="material-icons-outlined">forum</i>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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