2

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,248
  • 20
  • 86
  • 174
  • 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

1 Answers1

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
  • 1,823
  • 18
  • 15