マテリアルアイコンの使い方・カスタマイズ方法！導入は数分で完了！

近年、多くのWordPressテーマにも取り入れられ、ますます注目を集めているWebアイコンフォント。

一番の有名どころは「FontAwesome」ですが、実はGoogleが提供しているWebアイコンフォントもあります。

それが、マテリアルアイコン（Material Icons）と呼ばれるWebアイコンフォントです。

しかし、導入するためにはいくつかステップがあり、導入が必要と聞くだけで利用を避けてしまう方も多いのではないでしょうか？

本記事ではブログ初心者の方でも分かるように、マテリアルアイコンの導入方法から使い方、カスタマイズ方法まで詳細にご説明していきます。

本記事の内容

マテリアルアイコンとは？
マテリアルアイコンの使い方
マテリアルアイコンのカスタマイズ方法

本記事の信頼性

私は2年半以上ブログ運営を行っており、現在は専業ブロガーとして活動しています。

マテリアルアイコン（Material Icons）とは？

マテリアルアイコン（Material Icons）とは、Googleが提供するWebアイコンフォントです。

大きな特徴としては、マテリアルデザイン（Material Design）というGoogleが提唱したデザインの基、設計されている点です。

マテリアルデザインはどのユーザーから見ても、またスマホやパソコンなどどのようなデバイスから見ても、直感的で理解しやすいように考えられたデザインのことを言います。

参考Google Design

では、マテリアルアイコンの詳細な特徴を見ていきましょう。

マテリアルアイコンの特徴

アイコンの種類は1,300以上
様々なフォーマットファイルで利用可能
ライセンス形態は？
対応ブラウザ・バージョンは？
アクセシビリティが優れている

アイコンの種類は1,300以上

マテリアルアイコンは2020年9月現在、1,300種類以上ものアイコンが用意されています。

これらのアイコンを無料で、なおかつ簡単に自身のサイトで利用できます。

2014年にリリースされたマテリアルアイコンですが、現在もアイコンの種類は増え続けています。

ちなみに、私がブログを始めた2018年時点では約900種類のアイコンが用意されていましたが、2年後の現在では1,300種類以上と、1年で約200種類ものアイコンが増えているのが分かりますね。

また、アイコンは17種類のカテゴリに分けられています。

カテゴリ	アイコン例
Action	build check_circle_outline autorenew
Alert	add_alert error_outline warning
Av	airplay play_circle_outline web
Communication	call stay_current_portrait vpn_key
Content	add_circle push_pin save_alt
Device	access_alarm bluetooth signal_wifi_4_bar_lock
Editor	attach_file pie_chart vertical_align_bottom
File	attach_email cloud_done text_snippet
Hardware	desktop_mac mouse security
Home	sensor_door sensor_window
Image	add_a_photo audiotrack filter_1
Maps	add_location directions_car miscellaneous_services
Navigation	app_settings_alt arrow_right refresh
Notification	airline_seat_recline_normal no_encryption vibration
Places	do_not_touch pool smoking_rooms
Social	6_ft_apart notifications_none share
Toggle	check_box star_half toggle_on

マテリアルアイコンを利用すれば、

starstarstarstarstar_half

このようなレビュー記事でも使える星を実装することも可能です。

また、Webアイコンフォントという名前の通り、フォント（文字）扱いとなるアイコンなので、カラーやサイズの変更もできます。

様々なフォーマットファイルで利用可能

マテリアルアイコンは専用のコードをサイトに貼り付けるだけで、手軽に利用できるWebアイコンフォントです。

それに加え、下記のフォーマットファイルでも利用可能となっています。

フォーマットファイル

SVG
PNG

画像として利用したい時にも、マテリアルアイコンは最適です。

ライセンス形態は？

Webアイコンフォントを利用する上で注意したいのが、ライセンス形態です。

ライセンス形態が厳しければ、商用利用ができなかったり、再配付などできないケースもあります。

では、マテリアルアイコンのライセンス形態はどのようになっているのでしょうか？

マテリアルアイコンは「Apache License 2.0」のライセンスを採用しており、許可されていることは主に下記の通りです。

ポイント

商用利用
複製
改変
公開
再配付（改変後も可能）
アプリケーションへの埋め込み
サブライセンス
特許技術への利用

「Apache License 2.0」はオープンソースライセンスであり、数あるライセンス形態の中では規約が非常に緩くなっています。

ほぼ自由にマテリアルアイコンは利用できると考えて良いでしょう。

対応ブラウザ・バージョンは？

Webアイコンフォントはブラウザの種類によって表示されない場合があります。

また、ブラウザのバージョンによっては、対応していない可能性も。

ですが、マテリアルアイコンは幅広いブラウザに対応し、下記表の通りパソコン・モバイル両方のデバイスについて、新しいバージョンのブラウザでサポートされています。

ブラウザ	バージョン
Google Chrome	11
Mozilla Firefox	3.5
Apple Safari	5
Microsoft IE	10
Opera	15
Apple MobileSafari	iOS 4.2
Android Browser	3.0

しかし、Microsoft Edgeのサポート表記が公式サイトにはありませんでした。

念のため、Microsoft Edgeでアイコンが表示されるか確認したところ、

2020年9月11日時点のMicrosoft Edge最新バージョン「85.0.564.51」では正常に表示されました。

バージョンアップされると表示が崩れる可能性もありますが、現状は問題ありません。

アクセシビリティが優れている

視覚障害者の方は、スクリーンリーダーなどの読み上げソフトウェアを利用し、Webサイトを閲覧します。

しかし、Webアイコンフォントによってはソフトがアイコンを認識せず、読み飛ばすケースがあります。

そのような時に、マテリアルアイコンは非常に役立ちます。

何故なら、マテリアルアイコンは文字と判断され、ソフトもアイコンを読み上げるからです。

どのような方でも利用しやすい点から、マテリアルアイコンはアクセシビリティの優れたWebアイコンフォントと言われています。

Googleが提供するWebアイコンフォントだけに、読者ファーストで設計されていますね。

はらちゃん

マテリアルアイコン（Material Icons）の使い方

マテリアルアイコンの詳細をご説明したところで、具体的にWebサイトで利用する方法を見ていきましょう。

利用手順

マテリアルアイコンを導入する
マテリアルアイコンを表示する

マテリアルアイコンを導入する

マテリアルアイコンの導入は至ってシンプル。

下記コードをhead要素に含めるだけの数分の作業で完了でします。

導入コード

自身のサイトにアイコンを配置せずとも、Web経由でアイコンを取得し表示してくれます。

当サイトではWordPressを利用していますが、WordPressの場合は「外観＞テーマエディター」からコードをできます。

テーマエディター画面に「header.php」のファイルがあるので、先ほどのコードを入力しましょう。

「header.php」はサイトを運営する上で非常に重要なファイルであり、誤って編集するとサイト全体が崩れる可能性もあります。編集する際は必ずバックアップを取得し、作業してください。

マテリアルアイコンの導入は以上となります。

なお、当サイトで利用しているWordPressテーマ「AFFINGER5」の場合、マテリアルアイコンを標準で備えているので、導入作業は不要です。

「AFFINGER5」に興味のある方は、下記記事をご覧くださいね。

マテリアルアイコンを表示する

マテリアルアイコンの導入方法をご紹介したところで、実際にアイコンの表示方法を見ていきましょう。

まず、マテリアルアイコンを取得できる公式サイトへ遷移します。

公式サイトに遷移するとアイコンの一覧が表示されるので、利用したいアイコンを探しましょう。

今回は例として、「favorite_border」こちらのハートマークを表示してみます。

利用したいアイコンが見つかれば、アイコンをクリックします。

クリックすると、画面左下にバーが表示されます。

バーが表示されれば、「Selected Icon」をクリックします。

クリックすると、アイコンのダウンロードボタンとコードが表示されます。

もし、SVGまたはPNG形式のファイルを利用したい場合は、ボタンからダウンロードしましょう。

下記はPNG形式でハートの画像をダウンロードしたものです。

Webアイコンフォントとして表示したい場合は、コードをコピーします。

ハートマークの場合、下記がコードとなります。

ハートのコード

favorite_border

コードをサイトに貼り付け、「favorite_border」のように問題なく表示されれば完了です。

WordPressを利用している場合は、テキストエディタのほうにコードを貼り付けましょう。

ビジュアルエディタに貼り付けるとコード全体が文字として認識されますので、注意が必要です。

アイコンの導入から表示するまでの手順は以上となります。

マテリアルアイコン（Material Icons）のカスタマイズ方法

マテリアルアイコンはフォントとして利用できるので、HTMLでカスタマイズが可能です。

また、クラスを持たせることで、CSSで装飾もできます。

ここでは、HTMLとCSSを利用し、マテリアルアイコンをカスタマイズする方法をご紹介します。

カスタマイズ項目一覧

アイコンのカラーを変更する
アイコンのサイズを変更する
アイコンを反転させる
アイコンを回転させる
アイコンをリストで使用する

アイコンのカラーを変更する

アイコンのカラーを変更する方法はHTMLとCSSの2パターンあります。

それぞれ詳細を見ていきましょう。

HTMLでカラーを変更する

HTMLでマテリアルアイコンのカラーを変更する場合、タグにcolor属性を持たせることで、変更が可能です。

下記はコード例とアイコンのカスタマイズ結果です。

アイコン（CUSなし）	アイコン（CUSあり）	HTML
favorite	favorite	<font color="pink"><span class="material-icons">favorite</span></font>
facebook	facebook	<font color="#3f5d9a"><span class="material-icons">facebook</span></font>

カラーは英語表記、16進数表記どちらでも問題ありません。

CSSでカラーを変更する

CSSでマテリアルアイコンのカラーを変更する場合、新たにクラスを作成し、カラーを指定します。

下記は位置情報のアイコン「location_on」を「location_on」へカスタマイズしたものです。

なお、クラスは「red-location」としています。

HTML	<span class="material-icons red-location">location_on</span>
CSS	.material-icons.red-location { color: #dc4b3e; /* カラーの指定 */ }

クラス名とアイコンはお好みで変更するようにしましょう。

アイコンのサイズを変更する

次に、マテリアルアイコンのサイズを変更する方法です。

ここではCSSを使用し、「toys」のアイコンのサイズを「toys」へ変更する方法を解説します。

なお、クラスは「big-toys」としています。

HTML	<span class="material-icons big-toys">toys</span>
CSS	.material-icons.big-toys { font-size: 30px; /* サイズの指定 */ }

CSSで「font-size」のプロパティを使用し、サイズを変更してみましょう。

アイコンを反転させる

マテリアルアイコンを利用していると、アイコンの向きを変更したいケースが出てきます。

そのような場合でも、CSSを利用することで実現が可能です。

ここでは「airplanemode_inactive」のアイコンの向きを変えてみます。

HTML

airplanemode_inactive

	アイコン	CSS
左右反転	airplanemode_inactive	.material-icons.transform { transform: scale(-1, 1); }
上下反転	airplanemode_inactive	.material-icons.transform { transform: scale(1, -1); }
上下左右反転	airplanemode_inactive	.material-icons.transform { transform: scale(-1, -1); }

特に難しいCSSを利用することなく、簡単に向きを変えられるのが分かりますね。

アイコンを回転させる

次に少し応用編として、アイコンを回転させる方法をご紹介します。

アイコンを回転させるタイミングは多くありませんが、例えば「」こちらのアイコンを「」のように回転させ、画面ロード中のような演出も可能です。

下記がアイコンを回転させるためのコードで、クラスは「rotation」としています。

HTML

loop

CSS

.material-icons.rotation {
-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);}
}

必要に応じて利用してみてくださいね。

アイコンをリストで使用する

ここではさらに応用編。

マテリアルアイコンをリストの点の代わりに使用する方法です。

使用例としては、下記のようになります。

リンゴ
みかん
すいか

「play_arrow」のアイコンをリストの点として使用しています。

コード例は下記のようになり、クラスは「material」としています。

HTML

CSS

ul.material {
padding: 0 0 0 1em;
position: relative;
}
ul.material li {
list-style-type: none;
padding: 0.5em 0 0.5em 0.5em;
margin-top: 0em;
margin-bottom: 0em;
}
ul.material li:before {
font-family: Material Icons;
content: "play_arrow"; /* 使用するアイコン名 */
position: absolute;
font-size: 28px; /* アイコンのサイズ */
left: 0.1em; /* アイコンの位置調整 */
color: blue; /* アイコンのカラー */
}

アイコン名、サイズ、カラーはお好みで変更するようにしましょう。

また、アイコンの位置に関しては、利用する環境やWordPressテーマによって変わってきます。

例ではアイコンの位置を「left: 0.1em;」としていますが、位置が適切でなければ微調整してください。

マテリアルアイコンのカスタマイズ方法については以上です。

マテリアルアイコン（Material Icons）のまとめ

マテリアルアイコンはGoogleが推奨しているマテリアルデザインの考え方の基、設計されています。

また、当サイトで利用している大人気WordPressテーマ「AFFINGER5」でも採用されており、近年ますます注目度は高まっています。

しかし、マテリアルアイコンを使用するとなると、導入が必要で利用を避けてしまいがちですが、アイコンの導入も表示もコードを1行入力するだけで、非常に簡単であることがお分かり頂けたでしょう。

アイコンを画像ではなくフォントとして利用できるのが最大のメリットで、カラーを変更したりカスタマイズも可能なので、皆さんも是非利用してみてくださいね。

マテリアルアイコンを利用し、一段階進んだおしゃれなサイトを目指しましょう！

はらちゃん