アイコンフォントとしてMaterial Iconsの様々なスタイルを使うには

5720 ワード
デザイン HTML Design material-icon CSS HTML テキストリンク

これは何

  • Material Iconsを使うにあたってデフォルト以外の4スタイルを使おうと思うと、意外と公式ドキュメントが分かりづらいです
    • デフォルト以外の4スタイル = Outlined, Rounded, Sharp, Two tone
  • これらを使う方法をまとめました
  • ちなみに検証で使っていたコードはGitHubで公開しています
    • 記事で公開するように体裁だけ整えました

結論

全てのスタイルを使おうと思うなら、以下のコードを書けばOKです。

このlinkをHTMLで読み込む
<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"
/>

何が困ったのか

2021年3月2日にアップデート（？）されて、Google FontsがMaterial Iconsを扱うようになりました。

ページ上部にDeveloper guideへのリンクがあるわけですが、Icon font for the webの章ではGoogle Fonts経由でアイコンとスタイルシートを読み込む方法が紹介されています。

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

そして、Google Fonts上では使いたいアイコンを選択するとコードスニペットを表示してくれます。
例えばTwo toneなアイコンを選択するとクラス名にはmaterial-icons-two-toneを使いなさいとのことですが、このままコピペしても動きません。

どうすれば動くかというと、linkの中身をこのように変える必要があります。

公式のコード
  <link
-   href="https://fonts.googleapis.com/icon?family=Material+Icons"
+   href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone"
    rel="stylesheet"
  >

スタイルにあわせてhrefを変える必要があるのが、私が見る限りDeveloper guide内で明言されておりませんでした。

（もしどこかに記載があった場合はすみません。私の確認不足です。）

それぞれのスタイルを使用するためのリンク

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"
>

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"
/>

番外編：どのように発見したか

上手く表示できないため、本家のサイトでは一体どんなコードが書かれているんだろう……と思い開発ツールで確認してみました。

すると上の画像にあるように、material-icons-two-toneのクラスを指定しているファイルがcss2?family=Material+Icons+Two+Toneという名前なのが分かりました。

もしかしてと思いhrefもこれにあわせて書き換えたら上手く表示されたため、解決。