Icons

Displaying icons is an easy way to make your interface fancy and more friendly. Google just released an open-source icon font for Material Design called Material Icons

Setup

The css/materialicons/ directory and its content is required for the icon to work.

Using icons is pretty simple. There are even two ways of doing it!

With specific markup

The first way to use the icons is by using the icon class:

<i class="icon">favorite</i>
			

The downside is that this will create not-so-semantic markup in your page, especially if there is already an alternative text.

Note: you may also go the old-fashioned way if your browser doesn't support ligatures (see this page for more information)

<i class="icon">&#xE87D;</i>
			

With data-attributes

The second (and easiest) way to display an icon is by using the data-icon attribute:

<button data-icon="favorite">I love it!</button>
			

See? It's that easy!

What are the available icons?

All the available icons are listed on the Google Design page.

Just click on the icon you want to use and on icon font (at the bottom of your window) to see its code.