【IE対応】Google Material Iconsをdata 属性を使ってスマートに表示する

Google Material IconsをIE対応して使うには？

方法1： HTMLで直接書く

<i class="material-icons">email</i>

一番簡単な方法ですが、問題が1つあります。
グーグルの検索結果に表示されるようなタイトルやメニュー部分にこの方法でアイコンを設置してしまうと、emailお問い合わせフォームのような形でアイコンのコードが
テキストとして一緒に表示されてしまいます。

方法2： CSSで旧文字コードを使って書く

Google Material IconsをCSSで表示することができます。
公式サイトの「email」などのコードをcontentに入れることで使えますが、IEでは
以前の文字コードじゃないと表示されません。。

.material-icon::before {
   font-family: Material Icons, sans-serif;
   content: "\e0be"; //IE以外は「email」でOK
}

ただ、この方法だとアイコン毎にCSSを書かなければいけないためかなり面倒です。

HTMLだけで擬似要素として表示させる

CSSで表示できれば何も問題ないので、<i class="material-icons">email</i>のようにHTMLで完結した上で、擬似要素として表示する方法をまとめました。

ベースのHTML・CSSを用意

.material-icon::before {
   font-family: Material Icons, sans-serif;
   content: attr(data-icon);
}

<i class="material-icon" data-icon="文字コード"></i>

data-iconに入れたコードがcontent:にはいるようになります。
ベースができたので、アイコンを表示するために以下の手順で文字コードを用意します。

1. 使いたいアイコンを選ぶ

今回は公式サイトから「email」を選びます

2. 文字コードを調べる

「email」で検索して「e0be」の文字コードを取得
文字コード一覧：GitHub

3. 10進数に変換する

data-icon="\e0be"で表示されて欲しいところですが、これだと表示されません。
「\」を「&#」にした上で、e0beを10進数にすることで表示されます。

変換ツール

できた

<i class="material-icon" data-icon="&#57534;"></i>お問い合わせ

これで検索結果のテキスト表示も無く、アイコンの追加はHTMLだけでできるようになりました。文字コードを探して変換する手間はありますが、CSSで毎回設定するよりは楽になります。