-1

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

4

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 to use on the web 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">
| improve this answer | |
  • It's possible to use in illustrator? as a font – nagha Sep 19 '16 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 '16 at 11:16
  • Unfortunately the files aren't maintained anymore... – Thomas Orlita Dec 24 '19 at 22:04
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');
}
| improve this answer | |
  • Welcome to GDSE! You had two answers so I've merged them into a single one. Thank you for your contribution! – curious Dec 31 '19 at 0:49
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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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