Google Material Design Icon Fonts for the Web for near-absolute beginners
Material Design, by Google is a “system of guidelines, components, and tools that support the best practices of user interface design.’’
So, you might be thinking “what does this mean for me, a near-absolute beginner?”
The answer, is Icons. Material Icons is a Font, like Helvetica or Roboto, so you have all the perks of a font, an easy install and great variety.
To include them in any webpage add the following code in the Head of your HTML document:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">Once you included the font family, using an icon is super simple. Wrap the name of the icon you want to use in an <i> element and give it a class of ‘material-icons’.
<i class="material-icons">face</i>The browser renders the icon by simply using its name. You can look at the whole list of icons here.
Regular old image icons are a collection of pixels. When you scale them up to see in a higher resolution you might start seeing square edges. Material Icons are a font, so you can make them endlessly big without ever seeing a single jagged curve. Size them targeting its class
/* Rules for sizing the icon. */
.material-icons-36 { font-size: 36px; }<i class="material-icons material-icons-36">face</i>
An image icon has color so you can’t change it with CSS. Material Icons are easy to tailor to your web page: target its class
.material-icons .orange600 { color: #FB8C00; }
<i class="material-icons orange600">face</i>
And, that is it! Now you will never again have to deal with rigid, pixelated icons.