Google製のアイコンフォント「Googleマテリアルアイコン」はマテリアルデザインをベースとして設計されています。見やすくてデザインもFontAwesomeよりもこちらの方が好みかなと思っています。
ここではGoogleマテリアルアイコンの基本的な使い方、カスタマイズ方法をまとめています。
カスタマイズが簡単になった、最新のGoogleマテリアルシンボルの使い方はこちら
Googleマテリアルシンボルのカスタマイズと表示されないときの対処法
アイコンフォントを使わなくてもウェブサイトで表示できる！丸数字や★♥など特殊文字をウェブサイトで使う方法はこちら
サイトで丸数字や★♥など特殊文字を文字化けしないで使う方法
まだまだ人気のFontAwesomeをウェブサイトで使う方法はこちら
FontAwesome アイコンを擬似要素で使う、丸で囲む、知ってると便利な使い方
Googleマテリアルアイコンの使い方
Googleマテリアルアイコンの使い方は簡単。CSSを読み込みするだけです。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">アイコンは5種類
マテリアルシンボルと違い、マテリアルアイコンは可変フォントではないので、CSSで塗りつぶしの有無などの制御はできません。
マテリアルアイコンの5種類のフォントファミリー（Filled, Outlined, Rounded, Two Tone, Shape）をそれぞれ読み込む必要があります。
- Filled（塗りつぶし）※デフォルト
- Outlined（枠線だけのタイプ）
- Rounded（塗りつぶしで丸みがあるタイプ）
- Two Tone（グレーを使った2色使いタイプ）
- Shape（ラインがカクカクしたシャープなタイプ）
デフォルトはFilled（塗りつぶし）アイコンです。
See the Pen Google Material Icons Ex by mixtaro (@mixtaro) on CodePen.
アイコンを表示する
アイコンを表示させたい場所に挿入します。
span要素で直接HTMLに記述する
Googleのサンプルコードではspanタグですが、<i></i>でも問題なく表示されます。
<span class="material-symbols-outlined">
search
</span>擬似要素で表示する場合
虫メガネアイコンをaタグの擬似要素で表示させたい場合は、以下のように入力します。
<!-- HTMLソース -->
<a href="#" class="search-btn">検索する</a><!-- CSS -->
a::before{
content:"search";
font-family:"Material Symbols Outlined";
}FontAwesomeの場合、contentプロパティにはアイコンに対応したユニコードを入れますが、Googleマテリアルアイコンの場合はアイコン名を入れるだけですみます。わかりやすくていいですね。
ユニコードでも表示可能です。Code pointに記載されているユニコードe8b6の頭に\（バックスラッシュ）を追加します。
<!-- CSS Unicodeで指定した場合 -->
a::before{
content:"\e8b6";
font-family:"Material Symbols Outlined";
}マテリアルアイコンの基本的なカスタマイズ
アイコンサイズの指定
マテリアルアイコンのサイズを指定する場合はfont-sizeで指定する
.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; }公式サイトより引用。マテリアルデザインのガイドラインでは18,24,36,48ピクセルで表示することを推奨しています。（任意のサイズに変更は可能）
アイコンの色の指定
色の変更はcolorプロパティで変更します。
<!-- CSS -->
.color-yw{ color:#E89005; }
<!-- HTML アイコンのタグに作成したクラスを指定する -->
<span class="material-icons color-yw">
star
</span>アイコンが表示されない？
Googleマテリアルアイコンが表示されない場合は読み込むCSSを確認してみます。
Filled,Outlined, Two Tone, Round, Shapeでそれぞれのフォントファミリーを読み込む必要があります。
例えば、send アイコンのRoundタイプを読み込みたい場合は、link要素で読み込むのは以下のようにMaterial+Icons+Roundを指定する必要があります。
<!-- <head></head>内に記述 -->
<link href="https://fonts.googleapis.com/css?family=Material+Icons+Round&display=swap" rel="stylesheet">アイコンclassはmeterial-icons-roundにします。
<span class="material-icons-round">
send
</span>See the Pen Untitled by mixtaro (@mixtaro) on CodePen.
Filled,Outlined, Two Tone, Round, Shapeの指定方法は以下の通りです。
<!-- デフォルト Filled -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons&display=swap" rel="stylesheet">
<!-- Outlined -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined&display=swap" rel="stylesheet">
<!-- Two Tone -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone&display=swap" rel="stylesheet">
<!-- Round -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Round&display=swap" rel="stylesheet">
<!-- Sharp -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp&display=swap" rel="stylesheet">
一つにまとめて読み込みたい時は｜で繋げて記述します。これは他のGoolgeフォントを複数読み込む時と同じですね。
<!-- 全部指定 -->
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp&display=swap" rel="stylesheet">アイコンが表示されない場合は、link要素で読み込んでいるフォントファミリーとアイコンのクラスが一致しているか確認してみると良いです。
ちなみにNoto SansとRobotoをまとめて読み込みたい時は以下のような感じです。
<link href="https://fonts.googleapis.com/css?family=Roboto|Noto+Sans+JP&display=swap" rel="stylesheet">アイコンがずれる？の対処法
アイコン＋テキストを横並びに表示させたい場合に、位置がずれてガタガタになってしまう時には。Flexboxで並べてしまうのが一番簡単かと。
See the Pen Googleマテリアルアイコン横並び by mixtaro (@mixtaro) on CodePen.
display:flexで横並びにする
横に並べたいアイコンやテキストを囲んでいる要素に対して、display:flexを指定します。下の例だと、aタグです。
<ul class="nav nav-flex">
<li><a href="#"><span class="material-icons-round">home</span>HOME</a></li>
</ul>CSS
.nav-flex li a {
display: flex;
/* 縦方向中央に揃えるためalign-itemsを指定する */
align-items: center;
}display:inline-flexで横並びにする
元々アイコンに適用されているdisplay:inline-blockをdisplay:inline-flexに上書きすることでアイコンとテキストを横に並べることもできます。
.inline-flex li a span {
display: inline-flex;
/* 縦方向中央に揃えるためvertical-alignを指定する */
vertical-align: middle;
}マテリアルアイコンを全てダウンロードするには？
マテリアルアイコン のページでは、選択したアイコンをSVGやPNGでダウンロードできます。でも全部まとめてダウンロードしたいという時に。
最新の安定版バージョン
https://github.com/google/material-design-icons/archive/refs/tags/4.0.0.zip
または Githubリポジトリ でダウンロードできます。
GithubからCloneする$ git clone https://github.com/google/material-design-icons/
丸ごとダウンロードすると3GB超あるので注意です・・・。
