Taking a look at Google's Material Icons Font

Written by

Walter G.

Published on

July 20 2021

Filed under

web-design

If you have any type of icons on your websites, then odds are you are either using image files to render them or perhaps the ever so popular FontAwesome library.

Both good solutions for the most part. I am personally a huge fan of FontAwesome as they offer a large amount of very stylish icons and have a very generous free tier. And image icons work great as well, but updating or managing them can become a time consuming task. Having multiple alternatives to choose from is always a good thing.

Which is why I recently started to incorporate Google's Material Icons into my web projects. They function similarly to FontAwesome, as in, they are a single font library with hundreds of font icons to choose from. But the main difference is that they follow Google's Material Design guidelines.

And they look something like the following:

Overview

Google's Material Icons are another contender in the icons as a font category. And if there is anyone that knows fonts, it's Google. It's fair to say that services like Google Fonts has definitely changed the way that web developers work on a day to day basis.

Google Material Icons is essentially a library of 1,064 free licensed font icons which can be incorporated into any web project.

Material Icons follow the Google Fonts design guidelines, meaning simple, uniform and consistent in look and feel. And best of all? The font file comes in at around 42kb in size. This makes for a very well optimized experience while not skimping out on the usability.

Where to get Material Icons?

There are a number of ways to use Material Icons on your web projects. But the simplest and most straightforward way is to simply link to the Icons Google Font server.

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

In this way, similar to any Google Font, you get a single font with typographical rendering that can work with almost any client and that can handle different pixel densities.

To render any of the icons you can add the 'material-icons' class to the element of your choosing and set the inner HTML of that element to the given font icon name.

<span class="material-icons">face</span>

This would render the following: face

You also have the option of using the numeric keycode for an icon in cases where the browser does not support the given name.

<span class="material-icons">&#xE87C;</span>

To get a full-list of every icon name and keycode, you can check out the entire icon library right over here.

In order to follow proper material design guidelines, you also have the option of specifying a given font size using additional class names.

The guidelines recommend font sizes to be either 18px, 24px, 36px or 48px, with the default size being 24px.

.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; }

And the HTML being the following:

<span class="material-icons md-18">face</span>
<span class="material-icons md-24">face</span>
<span class="material-icons md-36">face</span>
<span class="material-icons md-48">face</span>

The different font sizes would render the following:

face face face face

You can also set the color property of any of the icons as well.

Image icons

And lastly, you can also go the traditional route and simply download the entire icon library in png or svg format.

You can download the entire font library in .zip format from Google Fonts here.

You of course miss out on the benefits of using a web font, such as CSS styling and reducing the number of resources being loaded. This is more useful for those looking to incorporate the icons to their Android or iOS applications.

Licensing

Google's Material Icons are available for you to incorporate them into your products under the Apache License Version 2.0. You are allowed to remix and re-share the icons and documentation in your own projects. The only thing you can't do, is to re-sell the icons themselves.

Comments

No messages posted yet

Add comment