Googleマテリアルアイコンとは、Googleが提供しているアイコンです。多くのサイトやアプリなどでも利用されており、もちろんWordPressサイトでも活用できます。商用利用可能な上、約900種類以上のアイコンを無料で利用可能です。

今回はそんなGoogleマテリアルアイコンを、WordPressサイトで使う方法を解説いたします。

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

Googleが無料で提供しているアイコン素材です。900種類以上から選んで簡単に表示できます。複数のカテゴリーに分けてあり、細かいスタイル調整もプレビューしながら行えます。

Googleマテリアルアイコン

どんなカテゴリーがあるの?

Googleマテリアルアイコンに用意されているカテゴリーの一覧です。

Activities

Android

Audio & Video

Brand

Business & Payments

Common actions

Communication

Hardware

また、種類が豊富なだけでなく、直感的に各アイコンの太さやサイズなどを調整できる点も便利です。

さらに、Apache License 2.0というライセンスの元で使用できるので、商用利用や改変・複製なども問題ありません。

WordPressでGoogleマテリアルアイコンを使う方法

WordPressでGoogleマテリアルアイコンを使うには、次の手順で進めます。

  1. headタグにコードを追加(スタイルシートの読み込み)
  2. HTMLでアイコンを表示

1. headタグにコードを追加

Googleマテリアルアイコンの公式ページから任意のアイコンを選択します。太さやサイズをお好みに変更して、最上部のコードをサイトのheadタグにコピペします。どのアイコンも共通ですが、3タイプのスタイルによって変化しますので後述しています。

TCDテーマの場合は、テーマオプションのカスタムスクリプトにコピペすればOKです。

このコードは、Googleマテリアルアイコンのスタイルシートを読み込むためのコードになります。

2. HTMLでアイコンを表示

あとは表示したい箇所にアイコンごとのHTMLをコピペすれば、表示されます。右側のコード一覧の中から「Inserting the icon」部分のHTMLをコピペします。

アイコンが表示されないときは?

headタグにコードを追加しているにもかかわらず、アイコンが正常に表示されない場合は、コード内のスタイル名とアイコンのクラス名が一致しているか確認してみましょう。

Googleマテリアルアイコンは、3種類のスタイルを選択できます。下記箇所です。

>>実際の画面で確認する

アイコンの角が丸くなったり、シャープになったり絶妙な調整が可能なんですが、ここを変更するとheadタグの内容も変更されるんですよね。

例えば、Sharpに設定すると、以下のようにコード内の記述もSharpに変更されます。

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

同じく、アイコンごとのHTMLのクラス名も連動して変更されます。

<span class="material-symbols-sharp">menu</span>

このスタイル名とクラス名が一致しているかどうかを確認してください。headタグにコードを設置した後に、スタイルを変更するとスタイル名とクラス名が揃っておらず、正常にアイコンが表示されなくなります。

アイコンの見た目を微調整したいときは?

アイコン設置後にサイトに合わせてカラーなどのスタイルを微調整したいケースもありますよね。

アイコンの右側に表示されるCSSを編集してコピペすれば、簡単にスタイルを調整可能です。用意されている「font-variation-settings」というプロパティを使います。

CSS

TCDテーマの場合は、カスタムCSSにコピペするだけで実現可能です。

※以下の例では、スタイルをSharpに設定している場合の例ですので、クラス名は適宜変更してください。

色を変える

アイコンのクラスにカラーを適用するだけで、任意の色に変更いただけます。

.material-symbols-sharp {
color:#d90000;
}

塗りつぶす

くり抜かれているデザインのアイコンは塗りつぶすことも可能です。FILLという値を使って、塗りつぶしの有無を設定できます(0:無し/1:有り)。

.material-symbols-sharp {
font-variation-settings:
'FILL' 1,
}

太さを変える

太さはwghtという値で変更できます。100(細)~700(太)の間で設定可能です(7段階)。

.material-symbols-sharp {
font-variation-settings:
'wght' 600,
}

アイコンを強調する

GRADという値では、アイコンの強調具合を設定できます。 -25, 0, 200から指定可能(3段階)。背景画像の色やテキストとのバランスを見て調整してみてください。

.material-symbols-sharp {
font-variation-settings:
'GRAD' 0,
}

サイズを変える

サイズを変えるといっても、アイコン自体のサイズが変わるわけではありません。アイコンのサイズに応じて、線の太さが自動的に調整されます。opszという値を使って、20, 24, 40, 48の間で指定(4段階)。

.material-symbols-sharp {
font-variation-settings:
'opsz' 48
}

これらを複数組み合わせることも可能ですので、ご自身のサイトにあったバランスに調整できます。

まとめ

Googleマテリアルアイコンなら、幅広い種類のアイコンを簡単なコピペだけで、好きな場所に表示できます。900種類以上あるので、用途にあったアイコンがきっと見つかるはずです。

アイコンの細かいスタイル調整も可能なので、サイトのデザインに合わせて変更いただけます。ぜひご活用ください。