Google Material Iconsを使ってみる

公開日: 2019年08月28日　更新日: 2019年09月14日

Google Material Iconsとは何か？

Google Material Iconsは、Google社が提供するアイコンフォントで、900個以上のアイコン素材を無料で利用することができます。ライセンスはApache License Version 2.0のようです。

さくっと導入

導入手法として、Google Web Fonts 経由とする方法とセルフホスティングとがあります。今回はより簡単な前者で行きたいと思います。

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

以上のコードを</head>の直前あたりに書くのが良いでしょう。WordPressの場合だと、[ダッシュボード]-[外観]-[テーマエディター]-[テーマヘッダー(header.php)]で編集できます。ここまでで準備完了です。

使ってみる

アイコン一覧はここにあります。

https://material.io/resources/icons/

アイコンを選んでクリックすると、左下に Selected Icon と表示されます。これをクリックすると、下の方に使い方(Usage)が表示されます。

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

このコードを必要とする場所へ貼り付ければ、ひとまず目的は達成です。

大きさを変えてみる

<style>
.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; }
</style>

<i class="material-icons md-18">face</i>
<i class="material-icons md-24">face</i>
<i class="material-icons md-36">face</i>
<i class="material-icons md-48">face</i>

Font Awesomeと違い、表示されているアイコンの見た目の下端が揃いません。拡大すればするほど、どんどん上へ。どうすればいいのだろう。

フォントサイズは24pxを想定しているようなので、その辺は気にしない方がいいのかも。

色を変えてみる

<style>
.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); }

.material-icons.orange600 { color: #FB8C00; }
</style>

Normal

face

Disabled

face

Normal

face

Disabled

face

Normal

face

まとめ

Google Material Iconsには、出来合いのclassがなさそうです。まあ、自力で書けばよいのでしょうが。SVGやPNGでアイコンをダウンロードできる点は魅力ですね。

[Top]

　