マテリアルアイコンを活用する
最終更新 2018/11/07

マテリアルアイコンを活用する

Googleによるクロスプラットフォームのためのガイドライン「マテリアルデザイン」、 その要素としてMaterial icons(マテリアルアイコン)がある。

マテリアルアイコンは、大量のアイコンをPNGまたはSVGの形式で無料ダウンロードできる。 しかも、ライセンスはApache license version 2.0.で、 クレジット表記もマストではない

PNGはサイズが小さすぎてスマホだとぼやけるので、2xを縮小表示して利用するのがベター。 SVGはサイズに関係なくキレイに表示されるので、こちらのほうが汎用性は高い。

PNG: SVG:

webデザインで使用する場合は、CDN経由でアイコンフォントとして利用するのがもっとも手軽。 公式ページで欲しいアイコンを選択して表示されるHTMLコードをコピーする。

CDN経由でCSSを読み込んで、コピーしたコードを貼り付ければアイコンが表示される。

search settings room photo_camera stay_current_portrait

アイコンフォントの良いところは、CSSを適用することでサイズや色を簡単に変更できる点だ。

search settings room photo_camera stay_current_portrait
search settings room photo_camera stay_current_portrait

テキストと並列して使用する場合は、テキストをspanタグなどで囲んで、テキストとアイコン両方にvertical-align: middle;を指定すれば、上下がそれなりに揃う。

photo_camera写真

input要素などで利用する場合は、value属性にキーワードを入れて.material-iconsを指定すれば良い。

マテリアルアイコンはGoogleのサービスなので、速度等はしっかりしていると思われる。 もし不安な場合やそもそもCDNが利用できない環境などでは、アイコンフォント自体をダウンロードして使用することもできる。 詳しくはマテリアルアイコンの公式ガイドのSetup Method 2を参照。