How to integrate Google Material Icons

This article is about where to get Material Icons and how to integrate them in your project.

Material Icons Quick Guide

When building an Angular application often Material Design from Angular is used and with it the Material Icons. The usage of Material Icons is not limited to Angular, you can use them in any web project.

What are material icons?

Material Icons are simple, modern and friendly icons, created using the Google Material Design guidelines. The guidelines ensure readability and clarity on different sizes and the icons are optimized for all common platforms and display resolutions.

All Material Design Icons can be found here and are licensed under the Apache License Version 2.0.

Using the icons

You have several options to use the Material Icons. You can download a few or download the entire library.

Download individually

The icons are available for download in SVG or PNGs from here and you can integrate them as an img or as an SVG as usual.

Download everything

If you want to download the entire icon library, grab the latest stable zip archive, about 60 MB.

The material icons are also available via git repository :

git clone http://github.com/google/material-design-icons/

You can also install them via bower :

bower install material-design-icons

You can also install them via npm :

npm install material-design-icons

Icon font for the web

The material icon font is the easiest way to add material icons to your web projects. The icon font is vector based (scales very well), small package size and easy to use. All benefits see here.

You have two options to use via Google Web Fonts or self hosting.

Setup Google Web Fonts

The easiest way to set up material icon fonts for any web page is through Google Web Fonts. Just include this line in your index.html or root html file:

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

Setup Self hosting

If you want to self host the web font, some additional setup is necessary. Host the icon font in a location, for example https://example.com/material-icons.woff and add the following CSS rule:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'), local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

In addition, the CSS rules for rendering the icon will need to be declared to render the font properly. This additional CSS is only needed, when self hosting, when using via Google Web Fonts this stylesheet is included.

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Using the icons in HTML

After installing it, it’s very easy to add icons into your web page. For example:

face

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

TL;DR

Google Material Icons are optimized for all common platforms and display resolutions.

The Material Icons be integrated via Google Web Fonts or self hosting.

Material Icons have a small package size and scale great (SVG).

Thanks for reading and if you have any questions , use the comment function or send me a message @mariokandut. If you want to know more about Angular, have a look at these Angular Tutorials.

References (and Big thanks): Google - Angular, Material Design