これは何
- 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もこれにあわせて書き換えたら上手く表示されたため、解決。