Webアプリにアイコンを入れたい

Google Material iconsとは

GoogleMaterialIconsはGoogleが作ったWebアプリ用のアイコンが入ったアイコンパックです。
パソコンにインストールする必要はなく、HTMLに数個のタグを入れるだけで使えるので、始めるのはとても簡単です。
アイコンはGmailなどで使われているような見た目で、Google Workspaceを利用している方なら親しみやすいデザインとなっています。

使ってみよー

筆者がこの記事を執筆したのは2021/11/16です。この先の内容はGoogle Material iconsのアップデートに伴って正しい情報ではなくなる場合があります。うまくいかない場合はGoogle Material iconsの公式リファレンスをみてみてください。

まず、アイコンを追加したいWebページのHTML・CSSに以下のソースコードを追加してください。

---

HTML

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

---

CSS

.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';
}

---

これでセットアップは完了です。
実際にアイコンを使ってみましょう。
まずGoogle Material iconsの公式サイトから使いたいアイコンを選んで、

"Code point"の下に書いてあるコードをコピーしてください。
そして、

<span class="material-icons">&#x<!--コピーしたテキスト-->;</span>

このようなプログラムを入力すれば、アイコンを追加できます。
アイコンのサイズ変更・色変更は文字と同じですので今回は説明しませんが、別の記事でいずれ説明するかもです。