Googleマテリアルアイコンの導入手順

マテリアルアイコンとは

Google が開発しているデザインシステム「Material」のアイコンフォント。
ライセンスはApache License 2.0なので、ほぼ自由に使うことができます。
※Apache License 2.0で許可されていること・されていないことについてはこちらの記事参照
Apache License 2.0とは？ライセンス内容をやさしく解説 | Beginner's Design Note

導入方法

GoogleWebFonts経由で導入する方法と自分のWebサイトにアイコンを設置する方法の二通り。

その1　GoogleWebFonts経由で導入する

htmlファイルのheadタグ内に以下を記述するだけ。

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

その2　ローカル環境にフォントファイルを配置する

material-design-icons/iconfont | GitHubからフォントファイルをダウンロードし、CSSファイルに以下を記述します。

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../font/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../font/MaterialIcons-Regular.woff2) format('woff2'),
    url(../font/MaterialIcons-Regular.woff) format('woff'),
    url(../font/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';
}

アイコンを表示する

アイコンを表示させたい場所に以下のコードを記述します。

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

すると、webブラウザによって「favorite」というテキストが画像に自動変換され、以下のアイコンが表示されます。

テキストから画像への変換に対応していないブラウザの場合でも、各画像に割り当てられているコードを使用すれば表示できます。

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

各アイコンに対応するコードはmaterial-design-icons/codepoints参照

SVGタグを使用して表示する

上記の方法でマテリアルアイコンを表示すると、ブラウザがIEの場合に、テキストから画像への変換時にテキストの文字が一瞬ちらついた後アイコンが表示されるという現象が発生しました。
（上記のアイコンの場合だと、一瞬「favorite」とテキストで表示された後にアイコンが表示されるようなイメージ）

テキストから画像への変換を発生させずアイコンを表示するには、SVGタグを使用します。

表示方法

1. Icons - Material Designでアイコンの一覧から、使用したいアイコンを選択します
2. SVGフォーマットのファイルをダウンロードします
3. ダウンロードしたファイルを任意のエディタで表示し、アイコンを表示したいhtml内にSVGタグをコピーします

上の例で使用したハートマークのアイコンのSVGタグは以下のとおりです。

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>

SVGタグのfillに色を指定すると、アイコンの色を変更できます。下の例ではハートのアイコンの色を赤に変更しています。
（アイコンの背景色を変更する場合は、pathタグのfillに色を指定します。）

<svg xmlns="http://www.w3.org/2000/svg" fill="red" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M13.35 20.13c-.76.69-1.93.69-2.69-.01l-.11-.1C5.3 15.27 1.87 12.16 2 8.28c.06-1.7.93-3.33 2.34-4.29 2.64-1.8 5.9-.96 7.66 1.1 1.76-2.06 5.02-2.91 7.66-1.1 1.41.96 2.28 2.59 2.34 4.29.14 3.88-3.3 6.99-8.55 11.76l-.1.09z"/></svg>

参考リンク

• Apache License 2.0とは？ライセンス内容をやさしく解説 | Beginner's Design Note

• [Icons – Material Design]
  (https://material.io/resources/icons/?style=baseline)

• [Material Icons Guide]
  (http://google.github.io/material-design-icons/)