【Google提供】マテリアルアイコンの使い方とカスタマイズ方法まとめ

アイコンフォントには数多くの種類がありますが、Googleが提供しているアイコンフォントがあります。

それがMaterial Icons（マテリアルアイコン）です。

ここではMaterial Iconsの導入方法から表示方法、カスタマイズ方法を解説していきます。

Material Iconsとは？

Material Icons(マテリアルアイコン)とは、Googleが2014年に提唱したMaterial Design（マテリアルデザイン）です。

Material Designという言葉が出てきましたが、Googleが提示している日本語のガイドラインでは下記のように定義されています。

ざっくり言うと、どのデバイスでもデザインを統一させて、使いやすくしていきましょうという動きですね。

そのデザインの１つとして挙げられるのが、Material Iconsです。

アイコンは無料で使用することができ、900種類以上にもなっています。

2014年にMaterial Iconsをリリースして以来バージョンアップを続け、2016年9月2日にリリースしたバージョン3.0.1が現在の最新版です。

各アイコンについて、アイコンフォント、SVG、PNGのファイルフォーマットで提供されており、CC BY 4.0のライセンスで公開されています。

また、音声読み上げソフトを使用すると、そのアイコンに適した音声で読み上げてくれますので、アクセシビリティ機能に適しています。

なお、アイコンの表示には対応ブラウザがありますので、下記の表を参考にしてください。

Material Iconsをアイコンフォントで使用してみる

公式サイトのガイドからアイコンの使用方法を確認できますが、英語です・・・。

もちろんここでは日本語で使用方法をご説明します。

Material Iconsを導入してみる

Material Iconsの導入には、HTMLのヘッダー内（head要素内）に下記のコードを入れるだけでOKです！！

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

導入は以上で終わりです。

それでは導入が正常にできているか確認も含めて、アイコンを表示していきます。

Material Iconsを表示してみる

Material Iconsを表示させるには、各アイコンに用意されているコードを使用します。

試しに下のようなカメラのアイコンの表示してみます。

1．公式サイトのアイコン一覧にアクセスします。

2．お好みのアイコンを選択し、画面下に表示されるコードをコピーします。

3．コピーしたコードをご自身のサイトに貼り付けてください。

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

各アイコンのクラスは全て同じなので、camera_enhanceの部分でどのアイコンを表示するか制御しています。

camera_enhanceが問題なく表示されればOKです！！

アイコン一覧の上部に検索機能も備え付けられており、またアイコンはカテゴリ毎に分けられているので、目的のアイコンを探しやすいですね。

Material Iconsをカスタマイズしてみる

Material Iconsはアイコンフォントなので、CSSを利用することで色やサイズを変更することができます。

CSSがよくわからない方は、下記の記事でカスタマイズを簡単に行えるようにしておりますので、是非ご活用ください。

Googleマテリアルアイコンを自動作成！CSSのカスタマイズにも対応！

2018年3月22日

色を変更する

試しに、filter_vintageの色を変更してみます。

まず、クラス【material-icons】の後ろに、独自にCSSで作成するクラスを追加します。

今回は【pink】という名称にしてみます。

<i class="material-icons pink">filter_vintage</i>

CSSで【.material-icons.独自のCSS名称】を作成します。

.material-icons.pink {
	color: pink;
}

アイコンの色がピンク色に変わりましたね。

サイズを変更する

試しに、saveのサイズを変更してみます。

色の変更と同様に、サイズを変更するCSSを作成します。

ここでは、独自のCSS名称を【large-size】としてみます。

<i class="material-icons large-size">save</i>

.material-icons.large-size {
	font-size: 42px;
}

標準のサイズより大きくなりましたね。

上下左右反転させる

試しに、border_colorを上下左右反転させます。

ここでは、独自のCSS名称を【transform】としてみます。

<i class="material-icons transform">border_color</i>

反転させる方向によって、CSSを変更してください。

◆アイコンを左右反転させる

.material-icons.transform {
	transform: scale(-1, 1);
}

◆アイコンを上下反転させる

.material-icons.transform {
	transform: scale(1, -1);
}

◆アイコンを上下左右反転させる

.material-icons.transform {
	transform: scale(-1, -1);
}

アイコンによって、反転させる方法を変えてみてください。

回転させる

試しに、loopを回転させます。

ここでは、独自のCSS名称を【rotate】としてみます。

<i class="material-icons rotate">loop</i>

.material-icons.rotate {
	-webkit-animation: spin 1.5s linear infinite;
	-moz-animation: spin 1.5s linear infinite;
	-ms-animation: spin 1.5s linear infinite;
	-o-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

CSS3を使用して回転させており、各ブラウザに対応させるようなコードとなっています。

ボタン上にアイコンを表示させる

ボタン（button）要素を使用し、文字を表示させる部分にアイコンのHTMLコードを入れます。

<button type="submit"><i class="material-icons">mail</i> メールを送信する</button>

リストの点にアイコンを使用する

リスト（箇条書き）の点を消し、代わりにアイコンを表示します。

各アイコンに用意されているユニコードを使用することで実現できます。

ユニコードは公式サイトのアイコン一覧から確認できます。

例えばdirections_carの場合、下記コードのE531の部分を使用します。

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

通常のリストのHTMLを使用し、CSSでユニコードを指定します。

<ul>
	<li>自動車</li>
	<li>航空機</li>
	<li>電車</li>
</ul>

ul {
	padding: 0 0 0 1em; /*点を少し右へ移動*/
	position: relative;
}

ul li {
	list-style-type: none; /*リストの点を消す*/
	padding: 0.5em 0 0.5em 0.5em; /*リストデータの位置を調整*/
	margin-top: 0em; /*行間の調整*/
	margin-bottom: 0em; /*行間の調整*/
}

ul li:before {
	font-family: Material Icons; /*Material Iconsの使用を定義*/
	content: "\E531"; /*使用するアイコンのUnicode*/
	position: absolute;
	left: -0.5em; /*アイコンの位置を調整*/
	color: red; /*アイコンの色*/
}

Material IconsをSVG、PNGフォーマットで使用してみる

冒頭で記述の通り、SVGフォーマット、PNGフォーマットでアイコンをダウンロードすることができます。

SVGフォーマットでダウンロード

アイコンを選択し、file_download SVGのボタンを押すことでダウンロードできます。

PNGフォーマットでダウンロード

アイコンを選択し、file_download PNGSのボタンを押すことでダウンロードできます。

まとめ

Material Iconsの導入から表示方法まで記載しましたが、ほとんどコードをコピーするだけでアイコンフォントを使用できますね。

また他のアイコンフォントとは異なり、公式サイトからSVGとPNGのファイルフォーマットでアイコンをダウンロードできるところも特徴の一つです。

前回バージョンアップされたのが2016年9月なので、そろそろバージョンアップも期待したいところですね。

Googleが提供しているアイコンということもあり、今後も注目していきたいと思います。

ご覧頂きありがとうございました。