Webフォントで使える！Google Fonts Icons（Material Icons）の使い方を解説

基本はclassに「material-icons」を書きます｡
他のアイコンテーマを使う場合は､使うテーマを書きます｡

Google Fonts Iconsで､使いたいアイコンをクリックすると､右にタグが表示されるので､そこからコピーし､HTMLの使いたい場所へペーストします｡

<div>
  <span class="material-icons">check_circle</span>
  <span class="material-icons-outlined">check_circle</span>
  <span class="material-icons-round">check_circle</span>
  <span class="material-icons-sharp">check_circle</span>
  <span class="material-icons-two-tone">check_circle</span>
</div>

基本的ンはCSSを書く必要はなくそのまま表示させることができます｡

アイコンの大きさや色などを変更する場合は､「material-icons」などにCSSを追加することは避け､別のclass名を追加し､そこにCSSを指定していっったほうがいいです｡

class名は､「アイコン名で使う」と同じように書きます｡

「Code point」の英数字を､2進数､8進数､10進数､16進数相互変換ツールで､16進数から10進数に変換し､data属性に指定します｡

<div>
  <span class="material-icons" data-icon="&#59500;"></span>
  <span class="material-icons-outlined" data-icon="&#59500;"></span>
  <span class="material-icons-round" data-icon="&#59500;"></span>
  <span class="material-icons-sharp" data-icon="&#59500;"></span>
  <span class="material-icons-two-tone" data-icon="&#59500;"></span>
</div>

「data-●●」の●●の部分は自由な名前をつけることができます｡
データ属性については､以下の記事で解説しています｡

データ属性の取得方法（jQuery・JavaScript・CSS）【HTML】

HTMLのdata属性の使い方を知りたいですか？この記事では、data属性の使い方、JavaScript、jQuery、CSSでのdata属性の取得方法を紹介しています。ぜひご覧ください。

data属性を使う場合は､以下のように書くだけで､data属性の値を取得できるので､CSSは変更することなくアイコンを変更することができます｡

span:before{
  content: attr(data-icon);
}

data属性を使わず､直接CSSで指定する場合は以下のように「Code point」を書きます｡

「Code point」は4桁の英数字で､その前に「\」(半角￥､バックスラッシュ)をつけます｡

span:before{
  content: "\e86c";
}