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

         

Web制作

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

2021年04月03日 8:00 

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

こんにちは、hgmです。

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

 

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の箇所は適宜変更してください。

 

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

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

 

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

 

デモ

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

 

 

まとめ

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

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

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

関連記事

この記事を書いた人

hgm

農業高校出身フロントエンドエンジニアの社員hgmです。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます!