Google Material Icons (マテリアルアイコン) の使い方
1. Google Material Icons とは
Google が開発しているアイコンフォントで個人でも商用でも無料で利用ができます。(ライセンスはApache License 2.0) アイコンフォントとして利用や、PNG,SVG がダウンロード可能なので画像としての利用もできます。
2. アイコンフォントとは
フォント形式で表示できるアイコンのことで、フォント形式なので CSS でアイコンの色や大きさなどを変更できるので画像より柔軟性があります。
3. アイコンフォントとしての使い方
アイコンフォントの導入方法
CDN を利用してアイコンフォントを導入するために、head タグ内に下記を追加します。
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
CDN とは
CDN (Content Delivery Network)とは、自分でファイルをアップロードする必要がなく、Web 上で配信されているものを読み込むことでファイルを利用する方法です。
アイコンフォントの表示方法
アイコンフォントの表示方法は、class を"material-icons"にするか、font-familyを'Material Icons'に設定し、「文字列」または、「unicode」を入力することでアイコンを表示できます。基本的には文字列で表示させるのがいいと思います。
「文字列」は、Material Iconsから、アイコンを選択し、画面左下「Selected Icon」というパネルを開くと確認できます。
class + 文字列 または unicode
<i class="material-icons"> menu </i> <i class="material-icons">  </i>
<input type="submit" class="material-icons" value="search" />
<input type="submit" class="material-icons" value="" />
font-family + 文字列 または unicode
<span style="font-family: 'Material Icons';">menu</span>
<span style="font-family: 'Material Icons';"></span>
.icon::before {
font-family: "Material Icons";
content: "close";
}
.icon::after {
font-family: "Material Icons";
content: "\e5cd";
}