【無料】Google配布のマテリアルWEBアイコン「Icons」の使い方をご紹介！

こんにちは、hgmです。

今回はGoogleが配布しているマテリアルのWEBアイコン「Icons」についてご紹介します。

Google Fonts

 

22 Tweets

1150 Users

52119 Pockets

Google Fonts

https://fonts.google.com/icons

Making the web more beautiful, fast, and open through great typography

WEBアイコンといえば、弊社でもよく使用している「Font Awesome」が有名だと思いますが、Googleが配布しているアイコンはどのようなものなのか調べてみました。

iconsはどのようなアイコンがあるのか

Google Fontsの中にあるIconsは、マテリアルなデザインを基調としたWEBアイコンです。全部で1,048個のアイコンがあります。

Font Awesomeと比較すると少しだけ線が細く感じます。シンプルで使いやすそうなアイコンだと思います。

またアイコンは5つのパターンから選ぶことができます。
メールのアイコンを例に見ていきましょう。

1. Outlined

輪郭のみで、塗りつぶしなしのデザイン。

2.Filled

塗りつぶしありのデザイン。

3. Rounded

角や線の先端が丸のデザイン。

4. Sharp

角や線の先端が直角のデザイン。

5. Two tone

ツートンのデザイン。

上記のように若干の違いですが、デザインの雰囲気に合わせて細かく調整ができます。

対応ブラウザは下記の通りで、問題なく使用できます。

Google Chrome 11
Mozilla Firefox 3.5
Apple Safari 5
Microsoft IE 10
Microsoft Edge 18
Opera 15
Apple MobileSafari iOS 4.2
Android Browser 3.0

使用方法

まずは読み込みの設定ですが、設定方法は2つあります。

GoogleFonts経由で設定

headタグ内に下記のコードを追加で設定完了です。

セルフホスティングに比べ、下記1行を追加するだけで完了するのでおすすめです。

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

セルフホスティングで設定

CSSに@font-faceで設定する方法です。

Gitで配布されているフォントをダウンロードし、手動でサーバーにアップロードする必要があります。
さらに下記のスタイルをCSSに追加することで読み込みができます。

urlの箇所は適宜変更してください。

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;

/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;

/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;

/* Support for IE. */
font-feature-settings: 'liga';
}

設定が完了したら、アイコンを追加しましょう。

Iconsから追加したいアイコンを選択すると、右側に選択エリアが出現します。
上部タブは「WEB」を選択、Icon fontのspanタグのコードをコピーし、HTML上にペーストします。

上記はHTMLへの追加ですが、疑似要素を使って追加することも可能です。

.link:after {
  font-family: 'Material Icons';
  content: "email";
  -webkit-font-feature-settings: 'liga';
}

デモ

See the Pen QWdKLNX by Sara Higuma (@higuma) on CodePen.dark

まとめ

今回ざっくりとGoogle FontsのIconsについてご紹介させていただきました。

フリー素材や他のWEBフォントアイコンで妥協していた方も、こちらのアイコンであればストレスなく使用することができるのではないでしょうか。

デザインに合わせて他のWEBアイコンサービスと使い分けするのも良さそうです。