Material Icons - Introduction

30th January 2020 | Christopher Pisani

What is Material Icons ?

Material Icons is a simple svg icon library, that is called with minimal code from the simple HTML element <i> and the class material-icons.

The code to call Material Icons

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

<!-- standard size icon -->
<i class="material-icons">face</i>

Setting custom sizes :

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

<!-- Custom CSS on icons -->
<style>
    .md-36 {
        font-size: 36px;
    }
    .md-48 {
        font-size: 48px;
    }
</style>

<!-- Standard Size -->
<i class="material-icons">face</I> Standard Size

<!-- Font size 36px --><br/><br/>
<i class="material-icons md-36">face</I> Font size 36px

<!-- Font size 48px --><br/><br/>
<i class="material-icons md-48">face</I> Font size 48px

Installation is simple. Just add the below code to your <head> element while making calls using the above method in your HTML code.

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

You can download the files on your system for offline use as well by downloading the files from GitHub Click Here To GitHub. You need some additional code in your CSS file to be utilized as follows:

<!-- Setting the material icons as font -->
@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');
}

<!-- Setting the class -->
.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';
}

While using Material Icons, you will face a lot of alignment issues. The following code will help you align the icons easily.

<!-- This line should be used in the <head> element. -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Test icon without alignment -->
<div>
    <i class="material-icons">person</i>
    <span>Standard Icon</span>
</div>

<br><br>

<!-- 
    Test icon with float alignment 
    Sometimes you get lucky alignment with the CSS float but this is not what you want
-->
<div>
    <i class="material-icons" style="float:left;">person</i>
    <span style="float:left;">Icon and text floated</span>
</div>

<br><br><br>

<!-- 
    Test icon with CSS alignment (perfectly aligned) even if icon/text is larger 
-->
<div>
    <i class="material-icons" style="vertical-align: middle;">person</i>
    <span style="vertical-align: middle;">Vertical alignment on icon and text</span>
</div>