Material Icons Guide の使い方

Material Icons Guide とは？

Googleが提供しているアイコンフォントです。
アイコンは無料で使用できます。

Material Icons Guideの使い方

HTMLのヘッダー内（head要素内）に下記のコードを入れます。

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

次に公式サイトから使いたいアイコンをクリックして選択します。
Material Icons Guide　公式サイト

左下の　Selected Icon ボタンをクリックすると以下のようなコードが表示されるので、コードをコピーしてHTMLの表示したいところに貼り付けます。
（アイコンのクラス名は全て同じなので、 favorite の部分でどのアイコンが表示されるかが決まります。）

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

選択したアイコンが表示されれば成功です。
Material Iconsはアイコンフォントなので、CSSで色やサイズを変更することができます。