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

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

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

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






 

Material Iconsとは?

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

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

 

 時代を超えて共通する優れたデザインの原則と、科学技術の革新性と可能性とを融合させた視覚言語を作り出します。
 プラットフォームの種類やデバイスのサイズにかかわらず統一感を出すことができる、単独の基盤システムを開発します。モバイルから教訓を得ることはもちろんですが、タップ、音声、マウス、キーボードはいずれも重要な入力方法です。Google

 

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

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

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

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

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

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

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

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

ブラウザ バージョン
Google Chrome ver 11以降
Mozilla Firefox ver 3.5以降
Apple Safari ver 5以降
Microsoft IE ver 10以降
Opera ver 15以降
Apple MobileSafari iOS 4.2以降
Android Browser ver 3.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を表示させるには、各アイコンに用意されているコードを使用します。

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

camera_enhance

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

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

アイコンのコピー手順

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

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

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

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

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

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

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

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

Googleマテリアルアイコンを自動作成!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;
}
filter_vintage

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

 

サイズを変更する

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

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

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

<i class="material-icons large-size">save</i>
.material-icons.large-size {
	font-size: 48px;
}
save

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

 

上下左右反転させる

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

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

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

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

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

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

 

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

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

 

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

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

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

 

回転させる

試しに、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);}
}
loop

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のボタンを押すことでダウンロードできます。

SVGフォーマットでダウンロード SVGファイルの構造

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

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

PNGフォーマットでダウンロード PNGファイルの構造





 

まとめ

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

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

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

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

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






コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です