【簡単】GoogleマテリアルアイコンをWebページに反映する方法

2021.10.06

Googleマテリアルアイコンとは？

Googleマテリアルアイコン（Material icons）とは、Googleが無料で提供しているシンプルでモダンなアイコンです。軽量で表示速度も速く、Google提供という面でも安心して利用できますね◎

種類もかなり豊富です。アイコンは、SVGまたはPNGでダウンロードすることができます。また、Webページ用に、フォントアイコンとして簡単に利用することができます。

▽Googleマテリアルアイコン
https://fonts.google.com/icons

それでは、Googleマテリアルアイコンを簡単にWebページへ反映する方法をご説明していきます。

Webページにアイコンを反映する方法

今回は例として「ハートの形のアイコン」を使用する手順を、１からわかりやすく説明していきます。

▽Googleマテリアルアイコン
https://fonts.google.com/icons

まずは、Googleマテリアルアイコンのサイト上部にある検索フォームに「heart」と入力して、アイコンを絞り込みます。（目的のアイコンは英語表記で探します。）

ハートに関連するアイコンが一覧で一瞬で絞り込まれました。探すのも簡単です◎

今回は、いくつか出てきたハートのアイコンの中から「」「Favorite」のアイコンを利用していきます。

使用したいアイコンを決めたら、<head>タグ内に下記の一行を追加します。

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

利用したいアイコンをクリックすると、右側にアイコンの詳細が表示されます。

HTMLに、<span>タグで追加することができます。参照するのは「Icon font」の箇所です。

<span class="material-icons">favorite</span>

疑似クラスを使って使用することもできます。参照するのは「Code point」の「e87d」です。contentプロパティに対する値として「e87d」を記述します。

.material-icons::before {
　font-family: 'Material Icons';
　content: '\e87d';
}

もし、Googleマテリアルアイコンが表示されない場合や、アイコンの種類「outlined」「Rounded」「Sharp」「Two tone」から、限定的に使用したい場合は、下記のコードを見直してみてください。

公式サイトのspanタグをそのままコピペすると「material-icons-round」ですよね。

<span class="material-icons-round">
favorite
</span>

そこで、埋め込みコードの記述「?family=Material+Icons」に「+Round」を追加してみてください。

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

これで反映されるはずです。