マテリアルデザインに最適なGoogleアイコンフォント「Material icons」

Googleが運営するwebサイト「Material icons」では、無料で使う事ができるマテリアルデザインのアイコンが900種類以上もあります。 しかも無料配布しているマテリアルデザインのアイコンはSVG、PNGだけでなく、アイコンフォントとしても利用できます。

さらにMaterial iconsのアイコンフォント用CSSファイルは、web上から呼び出すことができるのでダウンロードが不要です。 なのでほとんどコピペするだけで、マテリアルデザインのアイコンが使えるようになるので、初心者でも楽々導入できます。

このページでは「Material icons」のマテリアルデザインのアイコンをSVGやPNGではなく、アイコンフォントとして使う方法を紹介していきますね。ちなみにアイコンのイメージは下記のようになってます。

マテリアルデザインのアイコン一覧

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

「Material icons」のアイコンフォントの主な使い方の手順は次のようになってます。

  1. Material iconsのwebフォントとCSSファイルを呼び出す
  2. アイコンフォントを表示したい部分にHTMLタグを記述
  3. アイコンフォントの色やサイズ調整(しなくてもok)

上記は基本的には全てコピペで終わります。 Material iconsのwebフォントとCSSファイルはweb上から呼び出すので、ダウンロード不要ですし、会員登録などもないので面倒な作業は一切ありません。

それではcssファイルの呼び出しから順番に紹介していきますが、詳しい説明方法は「Material icons guide – Google design」にも記載してあります。

Material iconsのwebフォントとcssファイルの呼び出し

まずはMaterial icons guide – Google designに記載してあるように、下記のコードをHTMLファイルの<head>~</head>内に記述します。 ワードプレスの場合はheader.phpの<head>~</head>内になります。

ちなみにこれはGoogle Web Fontsから呼び出しているだけなので、下記をコピペするだけで大丈夫です。

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

アイコンフォントを表示したい場所にHTMLタグを記述

Material iconsのアイコンフォント一覧

あとはアイコンフォントを表示したい場所にHTMLタグを記述すると、マテリアルデザインのアイコンが表示されるようになります。 まずは利用するアイコンを探すためにMaterial iconsにアクセスします。 利用したいアイコンが見つかったらクリックします。

ICON FONTの場所

そうすると画面下部に青いバーが出現するので、右端にある「ICON FONT」をクリックします。

アイコンフォントのHTMLタグの場所

「STEP 2: Use Icon in Your Site」の下に表示されたHTMLタグをコピーします。

2種類のHTMLタグが表示されますが、<!–– For modern browsers. ––>の方はモダンブラウザにのみ対応させたい場合に使用します。 <!–– For IE9 or below. ––>の方はInternet Explorer9未満のブラウザにも対応させたい場合に使用します。

アイコンを表示させたい場所にコピーしたHTMLタグを記述して下さい。

<i class="material-icons">account_circle</i>
<i class="material-icons">lock_open</i>
<i class="material-icons">query_builder</i>

表示例

account_circle lock_open query_builder

上記のように表示されます。

アイコンフォントのサイズや色の調整

Material icons guide – Google designを見ると、下記のような拡張クラスが用意されています。

/* アイコンのサイズ */
.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); }

上記をCSSファイルにコピーし、HTMLタグと組み合わせるだけでアイコンのサイズ・色を変更することができます。

サイズを変更

サイズを変更するには、HTMLタグのクラス属性に「md-18」「md-24」「md-36」「md-48」を追加します。

表示例

face md-18 face md-24 face md-36 face md-48
<i class="material-icons md-18">face</i> md-18
<i class="material-icons md-24">face</i> md-24
<i class="material-icons md-36">face</i> md-36
<i class="material-icons md-48">face</i> md-48

色を変更

アイコンの色を変える場合もサイズの時と同様です。 各HTMLタグのクラス属性にそれぞれを追加して下さい。

表示例

face Normal face Disabled face Normal face Disabled
<i class="material-icons md-dark">face</i> Normal
<i class="material-icons md-dark md-inactive">face</i> Disabled
<i class="material-icons md-light">face</i> Normal
<i class="material-icons md-light md-inactive">face</i> Disabled

上記では用意されている拡張クラスを指定する事で色とサイズを変更しましたが、各自でスタイルを指定する事ももちろん可能です。 お手軽に利用したい時は利用してみて下さい。

Material iconsについて

Material iconsのアイコンフォントのライセンスはCC BY 4.0となっています。 また対応ブラウザは下記の通りです。

対応ブラウザ バージョン
Internet Explorer 10~
Google Chrome 11~
Firefox 3.5~
Safari 5~
Opera 15~
Android Browser 3.0~
Apple MobileSafari iOS 4.2~

まとめ

こんな感じですごい簡単にマテリアルデザインのGoogleアイコンフォントが使えるようになります。 おそらく他のwebフォントより圧倒的に導入が簡単なのではないでしょうかw

そして2014年の6月にGoogleがマテリアルデザインのガイドラインを発表しましたが、サイトをマテリアルデザイン化したい際には、「Material icons」は相当役に立つような気もします。 すごい手軽なアイコンなので、スマホやパソコンサイトに是非使って見て下さいね(^^♪