How to host material icons offline?

by

Method 2. Self hosting Developer Guide

Download the latest release from github (assets: zip file), unzip, and copy the font folder, containing the material design icons files, into your local project — https://github.com/google/material-design-icons/releases

You only need to use the font folder from the archive: it contains the icons fonts in the different formats (for multiple browser support) and boilerplate css.

  • Replace the source in the url attribute of @font-face, with the relative path to the iconfont folder in your local project, (where the font files are located) eg. url("iconfont/MaterialIcons-Regular.ttf")
@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(iconfont/MaterialIcons-Regular.woff2) format('woff2'),
        url(iconfont/MaterialIcons-Regular.woff) format('woff'),
        url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

<i class="material-icons">face</i>

NPM / Bower Packages

Google officially has a Bower and NPM dependency option — follow Material Icons Guide 1

Using bower : bower install material-design-icons --save

Using NPM : npm install material-design-icons --save

Material Icons : Alternatively look into Material design icon font and CSS framework for self hosting the icons, from @marella’s https://marella.me/material-icons/

Note

It seems google has the project on low maintenance mode. The last
release was, at time of writing, 3 years ago!

There are several issues on GitHub regarding this, but I’d like to
refer to @cyberalien comment on the issue Is this project actively maintained? #951 where it refers several community projects that
forked and continue maintaining material icons.

More Related Contents:

  1. jQuery Mobile: document ready vs. page events
  2. jQuery Mobile: Markup Enhancement of dynamically added content
  3. Why I have to put all the script to index.html in jquery mobile
  4. How To Save Canvas As An Image With canvas.toDataURL()?
  5. Phonegap InAppBrowser display pdf 2.7.0
  6. ‘img-src’ was not explicitly set, so ‘default-src’ is used as a fallback
  7. Materialize CSS – Select Doesn’t Seem to Render
  8. Phonegap Application text and layout too small
  9. Changing cursor to waiting in javascript/jquery
  10. how to auto select an input field and the text in it on page load
  11. Generating sound on the fly with javascript/html5
  12. Disabling enter key for form
  13. Load HTML template with JavaScript
  14. javascript close current window
  15. How does HTML tags work inside script tag?
  16. How can I capture an image via the user’s webcam using getUserMedia?
  17. Returning value from confirmation dialog using JQuery UI dialog
  18. Change form action on select option
  19. Call Library function from html with google.script.run
  20. HTML5 Video autoplay with sound unmuted
  21. onclick calling hide-div function not working
  22. How to insert HTML as Text
  23. How do I dynamically adjust css stylesheet based on browser width?
  24. Are dynamically inserted tags meant to work?
  25. Display Spreadsheet Data to HTML Table
  26. How to get and set the current web page scroll position?
  27. How do I put a clear button inside my HTML text input box like the iPhone does?
  28. Chrome Extension get selected text
  29. Owl Carousel Won’t Autoplay
  30. How can I calculate the difference between two times that are in 24 hour format?

Leave a Comment