Google Material Iconsマテリアルアイコン Googleホストとセルフ-ホストとCSS設定

Material Icons(マテリアルアイコン) 利用の”現場”

まず先に、GoogleのMaterial Icons(マテリアルアイコン)を利用する”現場”から解説

上記のページへ行って、マテリアルアイコンを選択

spanコード型

たとえば「Home」なら

Material Icons Home

右下のコピーアイコンをクリック

<span class="material-icons-outlined">
home
</span>

HTMLの任意の箇所にペースト 下記のようにアイコンが表示される(サイズやカラーは別途CSS設定)
といっても、Material IconsのCSSをhead要素に仕込んでおかないと表示されないが…

home

<span class="material-icons-outlined">home</span>
1行にしても可

Webアイコンは、spanが使われることが多く、Material Icons(マテリアルアイコン)もやはりspanのclassにGoogleアイコンですよと記述が必要
特徴的なのはspanタグでhomeというコードがマークアップされて、これがGoogleアイコンを特定して呼び出す仕組みになっていること

アイコンが表示されるまでに表示される代替フォント、フォールバックとして、spanコード型のコードのテキストが表示される

また、よくあるWebアイコンとは違ってspanは空タグではないので、空タグ嫌いのWeb通も納得する仕様といえる

CSS content型

このCSS content型は、上述のようなspanをHTMLに埋め込まない

上述のMaterial Symbols and Icons(マテリアルシンボル&アイコン)のページへのリンクは、右にアイコンが表示されているが

a[target="_blank"]::after {
font-family: 'Material Icons Outlined';
content: "open_in_new"; }

HTML側で外部リンク「target="_blank"」があれば、上述のCSSが稼働してGoogleアイコンを表示させるようにしている

これは、「::after」「::before」などでアイコンを表示させたいときに活躍する

Material Icons(マテリアルアイコン) Googleホスト

さて、spanコード型でもCSS content型でも、Googleアイコンを呼び出すCSSをWeb側で仕込んでおかないと、うまく表示されない
GoogleホストのCSSを読み込む設定が最小限
「Googleホスト」とはGoogleのサーバーにあるアイコンファイルを参照して読み込むということ
後述の自サイトのサーバーにアップロードして参照する「セルフ-ホスト」と区別する表現

Material Icons(マテリアルアイコン) CSS

仕込むCSSは、Material Iconsの5種類のアイコン、Outlined、Filled、Rounded、Sharp、Two tone をすべて対応できるようにする

<link rel="preload" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone&display=swap" as="style">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone&display=swap" media="print" onload="this.media='all'">

これは同じCSSを、preloadでフェイク?読み込み、Googleアイコンを表示するHTMLに出会ったときにスタイルシートとして稼働する、そういう仕組み

&display=swap は、PageSpeed Insightsで警告される「ウェブフォント読み込み中のテキストの表示」対策

この最小限の設定で、spanコード型でもCSS content型でも、WebページにGoogleアイコンが表示されるようになる

Material Icons(マテリアルアイコン) セルフ-ホスト

Googleホストは、アイコンファイルをGoogleのサーバーから読み込むので、理論的にはアイコン表示が重く遅くなる
そこで、自サイトにフォントファイルを置いて読み込みを速くしようという試みを
ただし、ケースバイケース、セルフ-ホストよりもGoogleホストのほうが軽く速くなることもある…

セルフホストは、もちろんアイコンファイルをサイトにアップロードしなければならない
また、上記のGoogleホストCSSの中身を編集加工して、セルフ-ホストのアイコンファイルを読み込む設定に書き換え(CSS第1部)
また読み込んだGoogleアイコンを表示するGoogleホストCSSの記述も編集加工する(CSS第2部)

Material Icons(マテリアルアイコン) フォントファイルの取得とアップロード

上記ページへ行って、左上の検索窓に「material」と入力

Filled、Outlined、Rounded、Sharp、Two tone の5種類をダウンロード
Material Iconsとお尻に何もないのが「Filled」塗りつぶしアイコン

google-webfonts-helperサイトでアイコンファイルを取得

下にスクロールしていくと、ダウンロードのボタンが現れる

「fonts」などの名前を付けたフォルダーを作成、ダウンロードしたアイコンファイルを格納する

Material Iconsのセルフ-ホストの準備ができましたよ とアナウンスされる

Material Icons アイコンファイルのダウンロード

CSS第1部の実際

CSSはアイコン種類ごとに2部構成で、第1部のメインはセルフ-ホストのアイコンファイルURLの記述

上記にアクセスして、CSSの中身をコピー、「css」フォルダーにgmi.cssとでも名前を付けたファイルを作成してペースト

src: url('../fonts/~.woff2') format('woff2');

urlのところを、自サイトのアイコンファイルのurlに書き換える
これを5種類のアイコンファイルすべてで繰り返す

これがCSS第1部

CSS第2部の実際

第1部の下に、5種類のアイコンのCSS記述がある。これが第2部

line-height: 1;
display: inline-block;

次に、上記2行を削除して、次の2行に書き換える

display: inline-flex;
vertical-align: middle;

これを5種類のアイコンで繰り返す

アイコンファイルのフォルダーgmi.cssのアップロードgmi.css読み込みの設定

fontsフォルダーごと、cssフォルダーごと アップロード

最後に、gmi.cssを読み込むタグをhead要素に記述
最初のGoogleアイコンCSSと同じ要領で

<link rel="preload" href="https://サイトURL/css/gmi.css" as="style">

<link rel="stylesheet" href="https://サイトURL/css/gmi.css" media="print" onload="this.media='all'">

さぁ、試してみよう!

Material Icons 活用

Material Icons(マテリアルアイコン)に限らず、Webアイコンはそれほど工夫も努力も要らず、シュッと使える

これはWordPressのメニュー画面、ナビゲーションラベルのところのテキストの前に、<span class="material-icons-outlined">home</span> とspanコード型を貼り付ける

このページの上のメインメニューのところ、「ホーム」テキストの前にアイコンが表示される

同じ要領で、スマートフォンでは下のフッターバーメニューにもアイコンを設定できる
メインメニューではアイコンは有っても無くてもかまわないだろうが、スマートフォンのメニュー、とくにフッターバーではテキスト無しでもアイコンは必須だろう

モバイルファーストのマテリアルデザインとGoogleアイコン(Material Symbols and Icons)

スマートフォンの小画面では、タップターゲットのボタンなどは目にとまりやすいデザイン(シャドウなどで立体感)、指でタップしやすい大きさ、そしてスマホアプリで定番のアイコンなど、デスクトップ時代のWeb作成からアップデートするべきだろう

お役立ち
注目