Material icons for the web - Quick start guide

Photo of post

Not so long ago, if you wanted lots of pretty icons on your website, you were faced with having to load images all over your page or create a nice sprite and play with many CSS rules.  With the advent of flexible web fonts, those times are almost a memory.   Using these fonts, instead of each icon being an image, it is represented in your document by a bit of HTML markup.  Some clever rendering in your browser replaces this with the relevant character from the font and you have your icon!  

There are a couple of key advantages of using icon fonts over images:

  • Fewer requests:   A single request to load the font file is usually all that is needed to make all the icons you need available.  If you don't take the time to combine all your image icons into a single sprite, the your visitors browsers will need to make a lot more requests to load all the images.
  • Better for retina:  On retina styles displays with higher pixel ratios, fonts get rendered beautifully smoothly
  • Scalability:  Bitmap images (jpg, gif, png) don't scale very well in a browser.  You can end up losing quality and your hard work can be undone.  Because the icons are fonts, they can be rendered at any size you need and will always look good.
  • Flexibility:  Because the icons are all just fonts, you can style them like any other.  Change colour, size, positions, etc. with standard CSS

 

A few things to beware of:

  • You can only rely on support for these font systems on newer browsers.   If you have to support older browsers, you should consider a fallback or an image-based system
  • It's harder to use colours.  Whilst it is possible to change the colour of an icon, and even (sometimes) use a clever combination of background and foreground colour to affect the style, if your icons need to be multi-coloured, you are going to have issues. Consider SVG or or another image-based solution.

 

One well-known and popular icon system is Font Awesome, which provides a great many icons and some clever functionality, another alternative that we're looking at here comes from a Google-supported project:  Material Icons

The material icons project is part of a wider 'Material Design' philosophy that Google recommends for implementation in user interfaces across web and mobile apps.   It aims to provide simple and clear icons for a lot of popular operations.

 

Using the material icon system on a web page is actually very simple:  You need to include the correct CSS file and then you can put icons into your page with some simple HTML.

 

In the <head> section of your document, you need to include the material icon css file:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

 

Once that's in place, you can use the following syntax to embed an icon:

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

 

The browser will encounter the above code and instead of the word 'build' will show a spanner icon instead:  spanner

 

The above code will work for modern browsers.  If you want to support IE9, you can use a slightly different syntax:

<i class="material-icons">&#xE869;</i>

The disadvantage of this is that it has less meaning in the actual code,  whereas the word 'build' actually gives you a hint as to what the icon means.

 

So that's about it.  With a couple of simple lines you can add material icons to your web pages.  For the full list of icons including their associated codes, take a look here: https://design.google.com/icons/

If you want a bit more information about how to implement the icons, including recommendations on size, colours, etc. take a look here:  http://google.github.io/material-design-icons/

 

Code snippets on this page are covered by the MIT licence