タイトル通り、cssの疑似要素でアイコンを表示したい時に、background-imageで画像表示するのもイマドキじゃないかなぁと思って調べたら、ちゃんとやり方があった。

CSSで文字コードを指定する

XXXXX:before {
	content:'\E89E';
	font-family: "Material Icons";
	}

こうすればよい。
contentには文字コードを入力する。

文字コードの調べ方(旧バージョン)

表示したいアイコンの文字コードはすぐ分かるので、”&#x”を”\”にしてcontentに入れる。以上。

文字コードの調べ方(2018年版)

Material Design ツールキットが一斉更新された際に文字コード表示が無くなって困っていたが、

ここのコードそのまま入れても大丈夫。

XXXXX:before {
	content:'3d_rotation';
	font-family: "Material Icons";
	}

もちろん今まで通り文字コードでも表示される。
※2018年6月5日更新

ダメな例

XXXXX:before {
	content:'<i class="material-icons">open_in_new</i>';
	}

contentにhtmlは指定できない。

参考にした情報

こちらを拝見しました。
Show icon with CSS :after :before · Issue #150 · google/material-design-icons · GitHub

ちなみにfont awesome使ってる場合のやり方はこちら。
fontawesomeのアイコンをcssの:before/:afterで挿入する – Qiita