Googleマテリアルアイコン使い方とカスタマイズ

2015-02-262024-05-05

WEB Tips ウェブ・アプリデザイン・コーディング

この記事にはプロモーションが含まれています

Google製のアイコンフォント「Googleマテリアルアイコン」はマテリアルデザインをベースとして設計されています。見やすくてデザインもFontAwesomeよりもこちらの方が好みかなと思っています。

ここではGoogleマテリアルアイコンの基本的な使い方、カスタマイズ方法をまとめています。

カスタマイズが簡単になった、最新のGoogleマテリアルシンボルの使い方はこちら
Googleマテリアルシンボルのカスタマイズと表示されないときの対処法

アイコンフォントを使わなくてもウェブサイトで表示できる！丸数字や★♥など特殊文字をウェブサイトで使う方法はこちら
サイトで丸数字や★♥など特殊文字を文字化けしないで使う方法

まだまだ人気のFontAwesomeをウェブサイトで使う方法はこちら
FontAwesome アイコンを擬似要素で使う、丸で囲む、知ってると便利な使い方

Googleマテリアルアイコンのライセンスは？

ライセンスはApache License バージョン 2.0となっており、誰でも自由に利用、変更、配布でき商用利用も可能です。

現在はGoogleフォントに組み込まれています。他のGoogleフォント同様、商用利用可能で印刷物や電子書籍、ロゴなどにも利用可能です。

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（塗りつぶし）アイコンです。

アイコンを表示する

アイコンを表示させたい場所に挿入します。

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>

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で並べてしまうのが一番簡単かと。

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超あるので注意です・・・。

URL Copied!