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

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．コピーしたコードをご自身のサイトに貼り付けてください。

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

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

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

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

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

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

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

色を変更する

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

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

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

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

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

<labelcss>.material-icons.pink { color: pink; } </labelcss>

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

サイズを変更する

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

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

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

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

<labelcss>.material-icons.large-size { font-size: 42px; } </labelcss>

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

上下左右反転させる

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

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

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