Google Material Design Icon Fonts for the Web for near-absolute beginners

Eduardo Gutiérrez
Nov 1 · 2 min read

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade