Help us understand the problem. What is going on with this article?

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ブラウザによって「face」というテキストが画像に自動変換され、以下のアイコンが表示されます。
baseline_favorite_black_18dp.png

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

<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>

参考リンク

haru_tp
Ruby/HTML/CSS/JavaScript/MySQLを勉強中。定期的にアウトプットして知識を定着させたい。
rosso-tokyo
渋谷にある少数精鋭のベンチャーSierです。最新技術・手法は常にキャッチアップし社内勉強会で情報共有しています。最近では外部技術セミナーも開催し情報発信の幅を広げています。
http://www.rosso-tokyo.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした