3

In this guide, they have instructed to download the Material Design Icon Fonts in formats like ttf, eot, woff, woff2 etc. and host them at a location on the server and use CSS like :

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

The problem is that in the Material Design Icons Collection page, when I select an icon, a bottom menu appears which shows buttons labelled SVG, PNGS, and <> ICON FONT, and when I click the last one, I get instructions which suggest loading the icon font from the web (which requires access to internet, and I need my web page to work (on localhost) even if there is no internet connection). Screenshot below.

The question is that how do I download the material design icon fonts in formats like eot, ttf, woff and woff2, so that I can self-host them and use them without an internet connection, in the way described above.

enter image description here

Solace
  • 8,612
  • 22
  • 95
  • 183
  • Where's your HTML source to go along with this? Because it's a good bet the problem is your markup, not the font itself. Although it's 2016 and you should [absolutely not be using a massive source stack like this anymore](http://stackoverflow.com/a/37091681/740553). – Mike 'Pomax' Kamermans Nov 19 '16 at 18:35
  • @Mike'Pomax'Kamermans What? What I am asking is that how do I download those fonts in `woff` and `woff2` and `eot` and `ttf` formats? What does that have to do with my HTML markup? – Solace Nov 19 '16 at 20:02
  • 1
    Just... download them? Google for "Material Icons Font", find https://material.io/icons/, then just read the text which strongly hints that you want to click through to the github project page. From there it's a trivial download. If that weren't enough, it's also a standard Google Webfonts entry over on https://fonts.googleapis.com/icon?family=Material+Icons so you could even just go there, see what CSS it gives you for puttin on a page, and download it directly. – Mike 'Pomax' Kamermans Nov 22 '16 at 00:07
  • @Mike'Pomax'Kamermans Well thank you very much. =) – Solace Nov 26 '16 at 06:02
  • 1
    Possible duplicate of [How to host material icons offline?](https://stackoverflow.com/questions/37270835/how-to-host-material-icons-offline) – bhv Aug 19 '17 at 07:51

2 Answers2

1

In the Material Icons' CSS file:

https://fonts.googleapis.com/css2?family=Material+Icons

there is a direct URL provided which you can use to download the raw .woff2 file:

https://fonts.gstatic.com/s/materialicons/v120/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2

I don't know if this .woff2 link is stable, possibly it can change in the future. Still, this link is enough for one-time download and then self-hosting.

Marcin Wojnarski
  • 2,362
  • 24
  • 17
0

The current version of the guide (as of April 2023) implies that you can download the fonts from the Github repository. In reality, however, that repo only has the TTF version of the font, the other formats (EOT, WOFF, WOFF2) are missing.

There is a fork at https://github.com/marella/material-icons, which always has the latest fonts in TTF, WOFF and WOFF2 (only EOT is missing, but that is a niche anyway, required for Internet Explorer 6–8 only).

You can just grab the fonts from the repo (note that filenames differ from what Google assumes in its docs) and drop them on your server. This is what I did (changing filenames to match those in the Google docs) and it works as expected.

Alternatively, the repo has setup instructions for various other methods.

user149408
  • 5,385
  • 4
  • 33
  • 69