Googleマテリアルアイコンを文字コード（UTF-16）を指定して（CSSで）使う方法

2015/09/29

フリーで使えるアイコンフォントとしてとても便利なGoogleのMaterial Iconsですが、「:after」などの疑似要素に「content: "文字コード"」を指定して使う方法がわからなくて、けっこうつまずいたのでメモ。

・Googleマテリアルアイコンのマニュアルページ
http://google.github.io/material-design-icons/

上のマニュアルページにも通常の<i>タグを使った方法以外には見当たりませんでした。
やりたかったのは以下のような使い方。

・css

div.search_icon {
	background: #9b59b6;
	color: #fff;
	padding: 8px;
	margin: 10px 0;
	text-align: center;
	width: 200px;
	font-size: 16px;
	border-radius: 5px;
	position: relative;
	}

div.search_icon:after {
	position: absolute;
	color: #fff;
	content: "\e8b6";
	top: 10px;
	right: 8px;
	position: absolute;
	color: #fff;
	content: "\e8b6";
	top: 8px;
	right: 8px;
	/* 以下は Google の指定通り */
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;	
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'liga';
	}

・html

<div class="search_icon">検 索</div>

・demo

検索

文字コードを調べる方法

上のデモのように使いたいアイコンのUTF-16の文字コード（上記の例ではe8b6）が分かれば「:after」疑似要素などでも問題なく使えます。

文字コードの調べ方ですが、下のマテリアルアイコンの一覧から使いたいアイコンを選択するとページ下部にメニューが表示されます。そこからさらに【ICON FONT】を選択するとウインドウが開くので、【For IE9 or below】の欄のコードを確認。そのコードの下4桁の前に\を入れたものがUTF-16のコードになります。

https://design.google.com/icons/index.html