How to self-host Google's Material Design Icon-Fonts on your server, and use them in your website?

Question

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.

Answer 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.