To access the Material Design Icon Fonts, it is advised to download them in various formats such as ttf, eot, woff, and woff2. These fonts can then be hosted on a server location and integrated into your CSS using the following code:
@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 challenge arises when accessing the icons from the Material Design Icons Collection page. Upon selecting an icon, a menu appears with options like SVG, PNGS, and <> ICON FONT. Clicking on the last option leads to instructions that recommend loading the icon font from the web, which may not be feasible if internet connectivity is limited. See the screenshot below.
So how can one acquire the material design icon fonts in formats like eot, ttf, woff, and woff2 for self-hosting without requiring an active internet connection?