Webデザインをする時に、欠かせないのがアイコンですよね。ここ最近は、「Font Awesome Icons」を使用したサイトが多く定番化しているんじゃないでしょうか。バージョン4.6.3でアイコンの登録された種類は634です(2016年6月30日現在)。順調にアイコンの種類も増えていっているのですがまだまだちょっといとしている物と違うんだけど…なんてことがよくあります。

そんな中グーグルさんが「Material icons」なるWebフォントを公開してくれました。

基本的な使い方はFont Awesome Iconsとそこまでは変わらないかと思います。

 

Google マテリアルアイコンのメリット

  • アイコンの種類がFont Awesome Iconsより豊富。900以上のアイコンが登録されている(2016年6月30日現在)
  • 読み込むファイルは42KBと軽量。ですが…Font Awesome Iconsのがもうちょっと軽いです…まぁ全然気にならない程度ですが
  • アクセシビリティにも優れていて文字読み上げソフトを使うとそのアイコンに適した文字列が読み上げられる
  • 画像を用意しなくても表示が可能で、色を変えたりサイズを変えたりがcssで容易にできる。

 

Google マテリアルアイコンの使い方

使い方はいたってシンプル。

1.マテリアル・アイコンのWebフォントとCSSを読み込む

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

 

2.アイコンを表示したい場所に、それぞれ割り当てられたタグを記述する

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

Material_icons_-_Google_Design_と_change-text_js

これだけで、ev_stationだったりaccount_balanceだったりbuildだったりac_unitだったりが気軽に使えちゃうわけです。
Icon font for the web(Material Icons Guide)

3.CSSでサイズや色を調整

さきにも言ったとおりサイズや色はcssで調整できます。各アイコンに割り当てられたクラス名を使用してデザインにあったサイズや色にしちゃいましょう。

/* サイズの調整する場合 */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* 明るい背景でアイコンの色を暗くする場合 */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* 暗い背景でアイコンの色を明るくする場合 */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

 

実際に表示されるアイコン例

大きさ
face
18px
<i class=”material-icons md-18″>face</i>
face
24px
<i class=”material-icons md-24″>face</i>
face
36px
<i class=”material-icons md-36″>face</i>
face
48px
<i class=”material-icons md-48″>face</i>
背景色に合わせる
face <i class=”material-icons md-dark”>face</i>
face <i class=”material-icons md-dark md-inactive”>face</i>
色を付ける
face <i class=”material-icons orange600″>face</i>

 

動作環境

ブラウザ バージョン
Google Chrome 11
Mozilla Firefox 3.5
Apple Safari 5
Microsoft IE 10
Opera 15
Apple MobileSafari iOS 4.2
Android Browser 3.0

 

その他の情報

PNGやSVG型式のデータをダウンロードも可能です。
また、cssのフォントファミリーとしても埋め込むこともできます。
詳しくは、Material Icons Guideをご覧ください。

Font Awesome Iconsに飽きてしまった方、もっと違うアイコンを使い方はぜひ「Googleのマテリアルアイコン」を試して見てください。