Google Material Iconsを疑似要素(before/after)に文字コードを指定して使う

今までアイコンフォントといったら「Font Awesome」を使っていましたが、
最近仕事でGoogleマテリアルアイコンを使うことがあり、デザインがこちらの方が好みだったので使い方を色々調べていました。

以下のマテリアルガイドには、他のアイコンフォントでは当たり前にやっていた、
疑似要素へCSSのcontentプロパティに文字コード設置する方法などが書いていなかったので調べてみました。

Googleマテリアルアイコン
Google Material Icons
Material Icons Guide

Google Material Iconsの基本的な使い方

CSSを読み込み

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

あとはHTML上でタグを使う

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

疑似要素で使う

使いたいアイコンの文字コードの確認方法
画像の赤枠部分の下4桁「E0BE」の頭に「\」をつければOKです。

例)メールアイコンを疑似要素で指定

.test:before {
  font-family: 'Material Icons';
  content: "\E0BE";
  vertical-align: bottom;
}

SNSでもご購読できます。