Google マテリアルアイコンの使い方【Webサイトに導入する方法】

「Google Material Icons」はマテリアルデザインの生みの親であるGoogle自らが手がけるマテリアルデザインアイコン集です。

この記事ではGoogle Material IconsのWebサイトへの導入方法を解説します。

アイコンを入手する

マテリアルアイコンは次の方法で入手可能です。

GitHubGitHub上のGoogle Material design iconsリポジトリに公開されています。
特に、アイコンフォントに関してはiconfontにまとめて公開されています。(アイコンイメージはカテゴリごとに保管されています。)
git$ git clone http://github.com/google/material-design-icons/
npm$ npm install material-design-icons
bower$ bower install material-design-icons

フォント版とイメージ版

マテリアルアイコンはフォント版とイメージ版が存在し、それぞれ導入方法や使用方法が異なります。

フォント版はCSSクラスをHTML要素に付与して使用します。

イメージ版は<img>要素や<svg>要素で使用します。発展的ですが、スプライトという方法で複数のイメージを単一のファイルにして扱うこともできます。

どちらを使用すべきか迷う場合はフォント版を選択するといいでしょう。

Webサイトにフォント版を導入する

Google Webフォントを利用して導入する

Google Webフォントを使用すれば簡単に導入することができるためオススメです。次の1行を追加するだけで済みます。

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

セルフホスティングする方法

次の記述は「https://example.com」にwoff2、woff、truetypeの3形式のアイコンフォントをホストする例です。

CSS
  1. @font-face {
  2. font-family: 'Material Icons';
  3. font-style: normal;
  4. font-weight: 400;
  5. src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  6. src: local('Material Icons'),
  7. local('MaterialIcons-Regular'),
  8. url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
  9. url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
  10. url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
  11. }

さらに、セルフホスティングする場合は次のように専用のクラスを設けると良いでしょう。

CSS(続き)
  1. .material-icons {
  2. font-family: 'Material Icons';
  3. font-weight: normal;
  4. font-style: normal;
  5. font-size: 24px;
  6. /* Preferred icon size */
  7. display: inline-block;
  8. line-height: 1;
  9. text-transform: none;
  10. letter-spacing: normal;
  11. word-wrap: normal;
  12. white-space: nowrap;
  13. direction: ltr;
  14. /* Support for all WebKit browsers. */
  15. -webkit-font-smoothing: antialiased;
  16. /* Support for Safari and Chrome. */
  17. text-rendering: optimizeLegibility;
  18.   /* Support for Firefox. */
  19. -moz-osx-font-smoothing: grayscale;
  20.   /* Support for IE. */
  21. font-feature-settings: 'liga';
  22. }

フォントを使用する

フォントをWebサイトで実際に使用するには、一般的に次のように<i>要素を使います。

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

また、より便利に使いたいのなら、次のようにCSSを追加します。

CSS(続き)
  1. /* Rules for sizing the icon. */
  2. .material-icons.md-18 { font-size: 18px; }
  3. .material-icons.md-24 { font-size: 24px; }
  4. .material-icons.md-36 { font-size: 36px; }
  5. .material-icons.md-48 { font-size: 48px; }
  6. /* Rules for using icons as black on a light background. */
  7. .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
  8. .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
  9. /* Rules for using icons as white on a dark background. */
  10. .material-icons.md-light { color: rgba(255, 255, 255, 1); }
  11. .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
  12. .material-icons.orange600 { color: #FB8C00; }

すると、このように使うことができます。

Webサイトにイメージ版を導入する

マテリアルアイコンのイメージ版はSVGPNGの2つの形式が提供されています。

SVG

個々のSVGファイルはライブラリからダウンロードできます。また次のパスにあるgitリポジトリから入手することもできます。

  1. material-design-icons/{category}/svg/production/

<category>の部分はライブラリで確認できます。

PNG

PNG形式もSVG形式と同様ですが、ラスター形式の画像であるため2種類のサイズで展開されています。

  1. material-design-icons/{category}/1x_web/
  2. material-design-icons/{category}/2x_web/

ライセンスに関して注意すべきこと

ライセンスは「Apache License 2.0」で公開されています。ですので、ソースコードに手を加えずライセンスを明記しておけば特に注意すべきことは何もありません

関連リンク

アイコン一覧
(アイコン名の確認に)
Icons – Material Design
マテリアルアイコンガイド
(導入方法の確認に)
Material Icons Guide – Google Design