Google recently updated their Material Design specification with the added bonus of the new Material Design Iconic Font.
These are free to use under the Creative Common Attribution 4.0 International License (CC-BY 4.0). This means you can do just about anything you’d like with these icons (Google would enjoy having attribution it isn’t necessary).
The icons are available to you in a number of formats and are designed for all your digital projects and platforms. You can grab all of the icons (at 57 MB) and host them yourself, download individually as SVGs and PNGs, or use them just like you would with Google Fonts.
For this quick demo I set it up as I would when using Fonts.
I included an @import in my css and grabbed the Material Icons.
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
And that was the hard part folks. No kidding.
Using the icons is as simple as:
<i class="material-icons">face</i>
face
One of the snappy facets of the icons is the use of typographic ligatures. As Google states, this “ allows rendering of an icon glyph simply by using its textual name “.
For browsers that do not support ligatures (IE9 and below) the fall back is to use the icons numeric character reference:
<i class="material-icons"></i>
The Material Design Icons listing provides a handy “cheat sheet”. Select your icon and a informational drop down will open that gives you quick use snippets as well as SVG and PNG downloads.
While the icons can be scaled to any size you like, Google recommends the icons to be sized at 18, 24, 36, or 48px. They make this very simple as well by simply adding a few rules to your css:
/* Rules for sizing the icon.*/
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
face
face
face
face
You can learn more about Google’s new Material Design Iconic Font, including the ways in which you can use it in your projects and further ways to style the icons here: http://google.github.io/material-design-icons/
