Material Icons（マテリアルアイコン）は、マテリアルデザインに合わせて作られたGoogleが提供するフォントサービスです。Webサイトやアプリなど、様々な場面で利用することができます。
Webサイトで利用する場合には、Google Fontsと同様にスタイルシートを読み込むだけで、簡単にアイコンフォントを表示することができます。
今回は、WebサイトでのMaterial Iconsの使い方と、アイコンが表示されない場合の解決策などをご紹介していきます。
Material Icons（マテリアルアイコン）とは
Material Icons（マテリアルアイコン）は、Googleが提供するオープンソースのアイコンフォントサービスで、様々な種類、スタイルのアイコンを無料で利用することができます。
以前はGoogle Fontsとは別のサービスとして扱われていましたが、現在ではGoogle Fontsに統合されており、そのためGoogle Fonts Iconsとも呼ばれることもあります。
Webサイトで利用する場合にはアイコンフォントとして表示することができ、CSSで色やサイズなどを簡単に調整することができる点が大きな魅力の1つです。
Material Iconsの使い方
では、早速WebサイトでMaterial Iconsを利用する方法をご紹介していきます。
スタイルシートの読み込み
まずは、アイコンの表示に必要なスタイルシートを読み込みます。HTMLファイルのheadタグ内に下記のコードを追加します。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">ここで注意しなければならないのが、上記のコードで読み込みできるのは「Filled」スタイルのアイコンのみという点で、それ以外のスタイルのアイコンを使用する場合はそれぞれ対応したスタイルシートの読み込みが必要となります。
アイコンが正しく表示されないという場合は、正しいスタイルシートを読み込みできているかを確認するようにしましょう。
<!-- Filled -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- Outlined -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
rel="stylesheet">
<!-- Rounded -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"
rel="stylesheet">
<!-- Sharp -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp"
rel="stylesheet">
<!-- Two Tone -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone"
rel="stylesheet">また、複数のスタイルを利用したい場合は、下記のようにまとめて記述することができます。
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone" rel="stylesheet">アイコンの表示
スタイルシートの読み込みができたら、次はアイコンを表示するために必要なコードを説明していきます。
アイコンを表示させるメジャーな方法として、下記の2種類の方法があります。
- HTMLで記述する
- CSSの疑似要素で記述する
1. HTMLで記述する
まずは、HTMLにコードを直接記述してMaterial Iconを表示する方法をご説明します。
HTMLでMaterial Iconを表示させるためのHTMLコードは、公式サイト上で利用したいアイコンを選択すると表示されます。
コードの中身は下記のようになっていて、クラス名にアイコンのスタイル、タグの中身にアイコンの種類が指定されています。
<span class="material-icons">thumb_up</span>上記のコードをHTMLのアイコンを表示させたい箇所にペーストすると、ページ上にアイコンが表示されます。ここで表示されるアイコンは「アイコンフォント」なので、CSSのcolorプロパティやfont-sizeプロパティを指定することで色やサイズを変更することが可能です。
ここでアイコンが表示されず、spanタグの中のテキストがそのまま表示されてしまう場合は、スタイルシートの読み込みが正しく行えていない可能性が高いです。まずはそれを確認してみてください。
ちなみに、公式サイトではspanタグが使われていますが、それ以外のタグに変更してもアイコンを表示させることができます。
2. CSSの疑似要素で記述する
CSSの疑似要素でMaterial Iconを指定したい場合は、font-family: 'Material Icons'を指定して、contentプロパティでそれぞれのアイコンに対応するコードを記述します。
.class::before {
font-family: 'Material Icons';
content: 'e8dc';
}また、こちらもfont-familyを書き換えることでアイコンのスタイルを変更することが可能です。
/* Filled */
font-family: 'Material Icons';
/* Outlined */
font-family: 'Material Icons Outlined';
/* Rounded */
font-family: 'Material Icons Round';
/* Sharp */
font-family: 'Material Icons Sharp';
/* Two Tone */
font-family: 'Material Icons Two Tone';ここでアイコンが正しく表示されない場合は、スタイルシートの読み込みが正しく行えていなかったり、font-familyやcontentの記述に誤字がある可能性が高いので確認してみてください。
スタイリング用のクラスの作成
アイコンのスタイルについては、それぞれ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); }このようなCSSを追記したら、あとは下記のようにHTMLを記述すればサイズや色を変更することができます。
<span class="material-icons md-48">thumb_up</span>
<span class="material-icons md-dark">thumb_up</span>ある程度スタイルにパターンがある場合は、予め上記のようなクラスを作成しておくと良いでしょう。
アイコンフォントを活用しよう
アイコンフォントは簡単な記述で様々なアイコンを表示することができ、CSSで色やサイズなども簡単に変えることができるので、Web制作において非常に頼もしい存在です。
Material Icon以外にも、アイコンフォントのサービスはたくさん公開されているので、自分に合ったものを探してみてください。
