Using Material-Design Icons in Web Pages

What Are Material Design Icons

You've all heard of MD, right? It's Google's Material Design. Material Design icons are icons that conform to the MD design language. This article shows how to display Material Design icons on web pages using fonts.

What are material icons

Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI. Ensuring readability and clarity at both large and small sizes, these icons have been optimized for beautiful display on all common platforms and display resolutions.

See the full set of material design icons in the Material Icons Library.

Preparation

1. Using Google's Online Fonts

This is the most convenient way:

Include the online CSS file

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

2. Using Local Fonts

For reasons you understand, Google services cannot be used in mainland China, so we can download these fonts and then reference them in the web page.

Download link: https://github.com/google/material-design-icons/tree/master/iconfont

Create a new CSS file:

@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');
}

.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 Them in Web Pages

Find the icon you want in the Material Design icon library, then you can display the icon correctly on the web page by its name.

Icon library: https://material.io/tools/icons/

Usage example:

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

Welcome to Discuss

For questions, please leave a message in the WeChat official account backend. I'll reply to every message~

• WeChat official account: 画星星高手
• Coding livestream: https://live.bilibili.com/11883038
• Zhihu: https://www.zhihu.com/people/dealiaxy
• Column: https://zhuanlan.zhihu.com/deali
• Jianshu: https://www.jianshu.com/u/965b95853b9f