1. Google Fonts Iconsとは

Google Fonts Iconsは、Webフォントとして提供されるアイコンのセットで、ウェブサイトやアプリケーションのデザインに利用することができます。

2.スクリプトの読み込み

Google Fonts Iconsを使用するためには以下のようなコードが必要になります。

<!DOCTYPE html>
<html>
  <head>
    <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"
    />
  </head>
</html>

linkタグを使用するにはheadタグの中で呼び込む必要があります。
hrefはGoogle Fonts Iconsの取得先を示しています。
relは外部の他の資源との関連性を示す属性になります。

3.アイコンの表示

Google Fonts Iconsを表示するには、コードが必要になるのでGoogle Fontsのウェブサイトにアクセスして取得します。

https://fonts.google.com/icons?icon.set=Material+Icons

アイコンを表示するには、画像の赤枠のコードをコピーする必要があります。右下のアイコンをクリックしてください。
bodyタグの中にコピーしたコードを貼り付けます。

<body>
  <span class="material-icons-outlined">search</span>
</body>

この例では、アイコンのクラスが「material-icons-outlined」で、表示するアイコンは「search」です。

画像のようにアイコンが表示されていたら成功となります。

4.スタイルのカスタマイズ

Google Fonts Iconsを使用する際に、アイコンのスタイルを変更することもできます。例えば、アイコンの色を変更するには、CSSで以下のように指定します。

.material-icons-outlined {
  color: red;
}

この例では、アイコンのクラスが「material-icons-outlined」で、色を赤色に変更しています。

"image"

以上が、Google Fonts Iconsの使い方の基本的な流れです。アイコンの選択やスタイルの変更など、さまざまなカスタマイズが可能です。詳細については、公式ドキュメントを参照してください。

完成形コード

<!DOCTYPE html>
<html>
  <head>
    <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"
    />
    <style>
      .material-icons-outlined {
        color: red;
      }
    </style>
  </head>
  <body>
    <span class="material-icons-outlined">search</span>
  </body>
</html>