マテリアルデザイン向けに作成されたGoogleアイコンフォント「Material icons」の使い方

Material icons

GoogleのMaterial iconsには、マテリアルデザインのアイコンが多数あります。

Material iconsのアイコンは以前、SVG、PNG配布していて利用できたのですが、アイコンフォントも利用できるようになったようです。

で、Material iconsのアイコンフォントの使い方を調べつつ使ってみたので、今回はその利用方法を紹介したいと思います。

スポンサーリンク
レクタングル(大)広告

Material iconsとは

Material icons - Google Design

Material iconsは、Googleが運営しているマテリアルデザインに対応したアイコンパックを配布しているサイトです。

全15カテゴリ、750種類以上のマテリアルアイコンをSVGや、PNGでダウンロードしたり、アイコンフォントとして利用できます。

こんな感じのアイコンです。

Googleマテリアルアイコンフォント

これらのアイコンフォントを、CC BY 4.0ライセンスで利用することができます。

対応ブラウザは、以下のようになっています。

ブラウザ対応バージョン
Google Chrome11~
Mozilla Firefox3.5~
Apple Safari5~
Microsoft IE10~
Opera15~
Apple MobileSafariiOS 4.2~
Android Browser3.0~

Material iconsのアイコンフォントの使い方

以下で、Material iconsのアイコンフォントの使い方を紹介します。

詳しい方法は、以下に記載してあります。

Material icons guide – Google design

主な手順

アイコンフォントを利用するには、主に以下の手順が必要です。

  1. Material iconsフォントのCSSファイルを呼び出す
  2. CSSファイルに利用をするためのコードを書く(コピペ)
  3. アイコンフォントを表示したいところにHTMLを書く(コピペ)

Material iconsのアイコンフォント用CSSファイルは、WEB上から手軽に呼び出すことができるので、かなり設定は簡単です。

Material iconsフォントのCSSファイルを呼び出す

Material icons用のCSSファイルは、Google Web Fontsにあるものを呼び出すだけで良いので簡単です。

<head></head>内に以下のように書くだけでOKです。

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

CSSファイルに利用をするためのコードを書く

Google Web Fontsから、アイコンフォントのCSSファイルを呼び出している場合は、手持ちのCSSファイルに以下のように書くだけでOKです。(Wordpressならstyle.cssに追記でOKです。)

/* Material iconsを利用する */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* 推奨サイズ */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;

  /* WebKitブラウザサポート */
  -webkit-font-smoothing: antialiased;
  /* Chrome、Safariサポート */
  text-rendering: optimizeLegibility;

  /* Firefoxサポート */
  -moz-osx-font-smoothing: grayscale;

  /* IEサポート */
  font-feature-settings: 'liga';
}

あと、拡張クラスを追加してクラスを組み合わせて、サイズ指定したり、色指定をしたりする方法も提案されています。

/* アイコンサイズ */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* 背景が明るいとき用のアイコン色 */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* 背景が暗いとき用のアイコン色 */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

アイコンフォントを表示したいところにHTMLを書く

あとは、Material iconsに移動し、利用したいアイコンを探します。

使用したいアイコンが見つかったら、クリックすると、画面下にHTMLタグが表示されるのでタグをコピーします。

Material iconsでアイコンを選択する

アイコンを利用するためのタグは、以下の2種類が表示されます。

表示されるMaterial iconsの利用タグ

<!– For modern browsers. –>と書かれた方は、モダンブラウザのみに対応できれば良い時に利用します。こちらは、要素内に「face」のように文字でアイコン情報が記載されています。なので、後からソースコードを見ても分かりやすいです。

<!– For IE9 or below. –>と書かれた方は、IE9未満のブラウザにも対応させたいときに利用します。こちらは、要素内に「&#xE87C;」のようなコードが記載されるだけなので、後からソースを見返しても、どんなアイコンなのかはわかりにくくなります。

で、実際に以下のように使ってみると

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

以下のように表示されます。

face stay_current_portrait directions_transit

うまく表示されない場合は、ブラウザをリロードしてみてください。

クラスを組み合わせて使用する

先程、CSSを記入した時に、以下のような設定を行いました。

/* アイコンサイズ */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* 背景が明るいとき用のアイコン色 */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* 背景が暗いとき用のアイコン色 */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

これを組み合わせて利用するには、以下のように書きます。

サイズ変更

face 18px

face

face 24px

face

face 36px

face

face 48px

face

face 18px
<i class="material-icons md-18">face</i>
face 24px
<i class="material-icons md-24">face</i>
face 36px
<i class="material-icons md-36">face</i>
face 48px
<i class="material-icons md-48">face</i>
文字色指定

face Normal

face

face Disabled

face

face Normal(背景暗色用)

face

face Disabled(背景暗色用)

face

face Normal
<i class="material-icons md-dark">face</i>
face Disabled
<i class="material-icons md-dark md-inactive">face</i>
face Normal(背景暗色用)
<i class="material-icons md-light">face</i>
face Disabled(背景暗色用)
<i class="material-icons md-light md-inactive">face</i>

上記のように、いろいろなクラスの設定を組み合わせで利用してもOKです。

まとめ

こんな感じでMaterial iconsのGoogleアイコンフォントは、結構手軽に利用できました。

Android 5.0(Lollipop)よりマテリアルデザインが本格的に採用されました。「これを機にサイトもマテリアルデザイン化」したいという場合には良いかもしれません。

Googleのマテリアルデザインのガイドラインは以下。

Introduction – Material design – Google design guidelines