GoogleのMaterial Iconsをダウンロードして使う

Font Awesomeをダウンロードして使う話はこちら。

Googleの提供するCDNのフリーアイコン、Material Iconsをダウンロードして使ってみる。
外部接続したくない案件なのだ。
個人的にはFont Awesomeのアイコンの方が好き。

1. 何はともあれダウンロード

GitHubからzipをダウンロード。
https://github.com/google/material-design-icons/releases

これを書いている2021/07/06現在、バージョンは4.0.0。

308MBという重さにびびる。
とはいえ、実際にサーバーに置くのはそこまでではない（使い方による）。
ちなみにFontAwesomeの方はzipが5MB、実際にサーバーに置くのが2.8MB。

2. zipを展開する

ダウンロードしたzipを展開します。
「右クリックして展開！」とかやっちゃうと重すぎて固まるかもしれません。
上手くいかない場合は解凍用のソフトなどを試しましょう。

• android
• font
• ios
• png
• src
• update
• LICENSE
• README.md

3. WEBアプリに設置する

必要なのはどれだ？？と迷いつつ試してみたところ、
fontディレクトリ内の各フォントデータ（*.ttfや*.otf）だけでOKでした。
それも、自分が使いたいものだけ選んで置けば大丈夫。

ただ、そのフォントデータを読み込むためのCSSなどを別途自分で書く必要があります。

4. タグを埋め込んで動作確認

公式ドキュメントを参考に、下記のようにしてみました。

公式ドキュメントはこちら。
https://developers.google.com/fonts/docs/material_icons

CSS例

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
    url(/css/fonts/MaterialIconsRound-Regular.otf);
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

アイコン表示例

<span class="material-icons">face</span>

これで表示されればOK。
ただ、fontawesomeと比べるとなんとなく汚いので（配置とか余白の微妙なニュアンス）、ちょっと自力で調整が必要かな…という感じ。

自分用メモ

• きれいな書き方あればまとめる