Google Material Icons最短手順 Googleアイコン活用 Googleホスト & セルフ-ホスト CSS アイコンファイル

app_badgingGoogleアイコン Material Symbols and Icons セルフ-ホスト三部作

linkMaterial Icons セルフ-ホスト

linkMaterial Symbols 静的フォントセルフ-ホスト

linkMaterial Symbols 可変フォント塗りつぶし太字細字セルフ-ホスト

Material Icons アイコン利用の”現場”

まず先に、GoogleのMaterial Iconsを利用する”現場”から解説

https://fonts.google.com/icons?icon.set=Material+Icons

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

spanコード型

たとえば「Home」なら

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

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

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

home

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

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の５種類のアイコン、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第１部)
また読み込んだGoogleアイコンを表示するGoogleホストCSSの記述も編集加工する(CSS第２部)

Material Icons アイコンファイルの取得とアップロード

https://gwfh.mranftl.com/fonts

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

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

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

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

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

CSS第１部の実際

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

https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone&display=swap

上記にアクセスして、CSSの中身をコピー、「css」フォルダーにgmis.cssとでも名前を付けたファイルを作成してペースト
「gmis」は、次にMaterial IconsだけでなくMaterial Symbolsのセルフ-ホストも想定しているため

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

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

これがCSS第１部

CSS第２部の実際

第１部の下に、５種類のアイコンのCSS記述がある。これが第２部

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

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

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

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

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

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

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

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

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

さぁ、試してみよう！