商用利用もOK！Google Material Iconsの使い方

Updated:
google material icons
Advertisements

Google Material Iconsは、Googleが提供するオープンソースのアイコン素材です。
ファイル形式はSVG/PNGとなっており、900+以上のアイコンが揃っています。
ダウンロードして使うこともできますが、
webフォントとして使うことも可能で、5種類も表示のタイプがあるので非常に使いやすいです！
読み込み方法によっては表示されないことがあるようなので、
使い方を備忘録としてまとめてみました。

また、Google Material Iconsを含むフリーのアイコン素材サイトについては
おすすめしたい、アイコンのフリー素材のwebサイト10選に詳しく記載しています。

おすすめしたい、アイコンのフリー素材のwebサイト10選
おすすめしたい、アイコンのフリー素材のwebサイト10選
説明なしで、視覚的に伝えることができるアイテム。日頃から、アイコン様にはとってもお世話になっております。。ちょうど人から聞かれる機会もあった…

Google Material Icons基本の使い方

1-1 使うための下準備

htmlの<head>内に下記を追加して、
Google Material Iconsの使用に必要なファイルを読み込みます。


 <!--デフォルトの形式(Filled)の場合-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

自分でホスティングもできるようですが、
こちらの方法の方がフォントのクラス名についての設定を自動で追加してくれるので楽です。

また、outlined やtwo toneなどほかの種類のアイコンを使いたい場合は、
そのままだと必要な指定が読み込まれず、表示されないようなので、
使いたいアイコンの種類に合わせて記述を下記のように変更します。


 <!--Outlinedの場合-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />

<!--Roundの場合-->
<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+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
Advertisements

1-2 フォントの最適化設定

ほかのGooglewebフォントのように、&display=swap を使って記述も可能とのことです。
(指定したフォントが利用可能になるまで、該当箇所を代替フォントで表示させる設定)


<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap" rel="stylesheet" />

また、こちらも他のGooglewebフォント同様、preconnectタグも追加できます。
(事前接続をして、読み込みパフォーマンスを向上させるための設定)


<link rel="preconnect" href="https://fonts.gstatic.com">

1-3 使いたいアイコンを選択

google material icons span

あとは、Google Material Iconsのサイトから、
アイコンをクリックして出てくる<span>〜</span>までを丸ごとコピーして、
そのHTMLの使いたい場所に追加します。(フォントのデフォルトサイズは24pxになっています。)
クラス名の指定が効いて、ブラウザ上ではアイコンが表示されます。

Advertisements

Google Material Iconsのカスタマイズ

色やサイズなど、普通のフォントのように自由にカスタマイズを加えることもできます。


<span class="material-icons icon-blue">home</span>


.icon-blue{
color:#0000FF;
}

例として、グーグルが推奨する「マテリアルデザイン」のガイドラインに基づいて、
公式サイトでは下記のような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);
      }
google material icons example

Material Icons を擬似要素で使い、表示されない時の方法

（※2022年3月追記）

ボタンなどでは、擬似要素としてアイコンを使うことも多いと思います。

Material Iconsを擬似要素として使う際、
font-family: ‘Material Icons’;と指定してブラウザ別に確認してみたところ、
ChromeとFirefoxは表示されるのに、
Safariだと下記のように四角になってしまい、表示されない、という現象がありました。

google material icons 擬似要素

色々調べてみましたが、
最初の設定で、デフォルトのFilled の以外、
例えばSharpのフォントを読み込んでいる時、
擬似要素のフォント指定をfont-family: ‘Material Icons’;ではなく、


.button::after{
font-family: 'Material Icons Sharp';
}　

のように、Material Iconsのタイプに合わせたフォント名で
読み込んであげると表示されるようです。

あとは、特に今回は対応不要でしたが、
例えば擬似要素でcontent: “brush”;として、
そのままブラウザでもその文字が出てきてしまう場合は


.button::after{
content: "\e3ae";
}　

のように、コード名での記述も試してみると良いかと思います。
(google Material Iconsのサイトで、Code pointとしてコードの記載があります。)

Google Material Iconsのまとめ

比較してみると、
他の有名どころのfont Awsomeだと会員登録する必要があるので、
Google Material Iconsはまず使うまでが簡単なのが素敵です。
(デフォルト形状以外の読み込み方法が、
公式サイトだと記載が見当たらなかったので、若干不親切ですが、、)
こちらのアイコンの方が、小さいサイズでも
矢印など、少し見た目がスッキリ使える印象なので、
サクッと導入したい時に取り入れてみたいと思います！

Advertisements

あわせて読みたい