Googleアイコン “Material Icons” と “Material Symbols”

アイコンには “言語の壁” を克服する可能性がある。なぜなら「全人類が理解できる」からだ。しかも「スグに理解できる」という特性まで持ち合わせている。『アイコン〔愛〕は地球を救う』というオヤジギャグも、侮〔あなど〕れない。そして2022年。”Googleアイコン” に動きがあったヨウダ。（少し乗り遅れ気味だが）さっそく試してみようと思う。

◆0. Material Symbols

『最新アイコン体系 “Material Symbols“』とか見ると、メチャ気になる。

『“可変フォント技術” を採用』とか見ると、調べたくなる。。。

Say hello to the newest iconography using variable font technology, Material Symbols! Available in 3 styles: Outlined, Rounded and Sharp. Each provides 4 stylistic attributes: Weight, Fill, Optical size, and Grade. Check out the full library at http://fonts.google.com/icons
2022-04-21 Google Fonts https://twitter.com/googlefonts/status/1516934123700383744

アイコンあれこれ：道路標識, 危険標識 (ISO 7010), オリンピック種目案内, 絵文字

◆1. アイコンの “可能性” について

【アイコン】（ピクトグラム）は、人類社会に欠かせない。

道路標識 (, , ,,,,)
危険標識 ⇒ “ISO 7010”
オリンピック種目案内
絵文字…

そしてIT業界においても近年、

settings ← “歯車アイコン” は〔設定メニュー〕
menu ← “三本線アイコン“は〔メインメニュー〕（⇔ハンバーガーアイコン）

といった共通認識が醸成された。（と言ってよい）（たぶん）

今後、【言語】への依存は、ますます減っていく。このまま「アイコンの標準化」が進めば、”言語設定” を切り替えなくても、“言語設定” がどの言語であっても、違和感なく使用できるようになるのかもしれない。（全人類が同じインターフェースで操作する日は遠くない？！？）

「画面の狭いスマホ」が普及したオカゲ、なのか？　いずれにせよ “文字でキッチリ説明する” （←”ダラダラ説明する” ？）という前世紀の文化は完全に廃れた。

◆2. 使いやすいアイコンは無いものか？

世界中のシステム／ソフトウェアは、”同じアイコン” を使うべきだ。（オリジナリティは最小限にとどめるべきだ）

誰でも利用できる
簡単に利用できる
無料で利用できる

そんな “アイコン Collection” が期待され続けている。今日時点での最有力は、

『Font Awesome』と
『Google Fonts Material Icons』

と言ってよい。そして2022年、『Google Fonts Material Icons』の姉妹？ Collection として、

『Google Fonts Material Symbols』

が登場した。

※ “姉妹版” （両者対等）というより “親子版” （やや上位）なニュアンスかな？

The Material Symbols font is the variable version of the Material Icons font.
https://material.io/blog/introducing-symbols (2022-04-19)

ちなみに Questetra 社のWebサイトでは『Font Awesome』（フォント・オーサム）を使っている。2018年には有償版（Font Awesome Pro）のユーザになっている。また、Questetra 製品では、近年に至り Google 社の『Google Fonts Material Icons』（マテリアル・アイコン）を導入している。すでに全ての操作画面に “Google アイコン” がある。（ような気がする）

https://io.google/2022/program/06aeeb23-3f65-4a7b-9947-c80aa35a6c07/

◆3. 可変フォント技術！？

平たく言えば、

FILL axis: 【Fill】の有無（塗りつぶし）
wght axis: 【Weight】7段階（太さ）
GRAD axis: 【Grade】3段階（エンボス凸凹度）
opsz axis: 【Size】4段階（サイズ）

の変化（Variation / Customization）を「1つのデータ」でカバーする技術だ。

※形状の違い（Outlined・Rounded・Sharp の違い）まではカバーしない。

★なるほど！　たとえばアイコンの「非選択状態」と「選択状態」を FILL 0 ⇒ FILL 1 というCSSスタイル変化で実現できるようになるワケだ。

★なるほど！　”Fill” を on-off 変数（0-1変数）にした時点で、「Material Icons 時代に存在した2色アイコン “Two tone”」（例： email ）は存在しえなくなったのだろう。（←”進化の代償” と言ってもイイ）

<div style="font-variation-settings: 'FILL' 0, 'wght' 700;">
<div style="font-variation-settings: 'FILL' 1, 'wght' 700;">

つまるところ、従来は「非選択状態アイコン」と「選択状態アイコン」を “差し替える” という手段をとっていたのが、、、これからは「一つのアイコン」を “変化させる” という手段で対応できるようになるのダ。（ウレシイ？）（ウレシイ？？）（フォント〔ホント〕にウレシイ？！？）

アニメーション “Web Animations API animate()” などで便利そうだ！
ポインタのホバーを表現する際（CSS :hover）などに便利そうだ！！

Androidの「Material Design」アイコンフォントが可変フォント技術に対応
～4つのスタイルを1つのフォントファイルで実現～
https://forest.watch.impress.co.jp/docs/news/1404656.html

ちなみに、世界標準の業務フロー図（BPMN）で、塗りつぶしのない email は「着信」（Catch）を意味する。塗りつぶされた email は「送信」（Throw）を意味する。 Material Symbols なら、同じフォントデータで表示できるゾ！！（ウレシイ？？）

▽ “Static font” mode

▽ “Variable font” mode

◆4. 習うより慣れよ！！

『Google Fonts Material Symbols』は多方面で活用されるだろう。

「フォントのデータ量を削減できる」という触れ込みだけで十分に魅力的だ。（「Googleが作った」という触れ込みだけで？）

ということで、Google Fonts のアイコンフォント『Material Symbols』（と『Material Icons』）をWebサイトで表示できるように設定した。

help_outline Google Fonts Material Icons にはどんなアイコンがあるのか？
help Google Fonts Material Symbols にはどんなアイコンがあるのか？
Google Fonts と WordPress との相性はどうか？
WordPress の記事編集において、どのような操作が必要か？
FontAwesome との違いは何か？
そもそも HTML文中のどんな場所でアイコンを活用すべきなのか？
んでもって FontAwesome と同居させる意味はあるのか？？

Questetra社では、CMS として、クラウドサービス “WordPress.com” （WordPressテーマ： “Astra”）を活用している。

◆5. 使い方

基本的には、それぞれのギャラリーでアイコンを選択し “表示されるコード” を埋め込めば良い。『Material Symbols』も『Font Awesome』も『Material Icons』も、その考え方自体に大差はない。

Google Fonts Material Symbols (Outlined)
- https://fonts.google.com/icons?icon.set=Material+Symbols
Font Awesome
- https://fontawesome.com/search?q=settings
Google Fonts Material Icons (Filled)
- https://fonts.google.com/icons?icon.style=Filled&icon.set=Material+Icons
Google Fonts Material Icons (Outlined)
- https://fonts.google.com/icons?icon.set=Material+Icons

◆ 5-0. Material Icons の場合

settings と入力すれば

塗りつぶし文字 settings が表示される。

settings と入力すれば

アウトライン文字 settings が表示される。

（←注：”デフォルトの Filled” と “Outlined” は “別の形状” のあつかい）

◆5-1. Material Symbols の場合

settings と入力すると

settings と表示される。

settings と入力すれば

settings と表示される。

◆5-2. Font Awesome の場合

 と入力すると

と表示される。ちなみに Plugin を入れている場合、[icon name="gear" prefix="fa-solid"] と入力しても良い。

◆6. 発生したトラブル

◆6-1. アイコン表示位置が上下にズレる

WordPress の管理権限ユーザは、ドキュメントを参考に設定することになる。

◇マテリアルアイコンガイド　＞　ウェブのアイコンフォント
◇マテリアルシンボルの使用　＞　ウェブで使用　＞　Google Fonts の静的フォント

しかし、そのまま利用するとズレが生じた。どうやら「line-hight:1, display:inline-block, …」といった設定になっていることが原因だ。意図は不明ながら、

display: inline-block ⇒ display: inline-flex
＋ vertical-align: middle

あたりのネット民の推奨情報を適用して、このトラブルを回避している。（↓ Static font / Variable font ）

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<style type="text/css" id="material-css-nandezurennen">
.material-icons { display: inline-flex; vertical-align: middle; }
.material-icons-outlined { display: inline-flex; vertical-align: middle; }
.material-symbols-outlined { display: inline-flex; vertical-align: middle; }
</style>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
<style type="text/css" id="material-css-nandezurennen">
.material-icons { display: inline-flex; vertical-align: middle; }
.material-icons-outlined { display: inline-flex; vertical-align: middle; }
.material-symbols-outlined { display: inline-flex; vertical-align: middle; }
</style>

◆6-2. WordPress エディタとの相性はヨクナイ

『Font Awesome』と同様、『Material Symbols』（や『Material Icons』）も、WordPress エディタ（Gutenberg）と相性が悪い。

現状、ブロック単位の「Edit as HTML」で “span タグ” を入力していると、セッカク書いた入力が書き換えられてしまう場合がある。特に、多階層リストは入力できたものではない。

そもそも「Edit as HTML」で “span タグ” を入力するのはメンドウだ。その点、『Font Awesome』は “ショートコード” を入力すれば「Edit as HTML」と切り替える必要が無いので安定して編集できる。（⇒『Material Symbols』（や『Material Icons』）も Plugin 化するべき）

◆6-3. あるべきCSSの読み込み範囲がナヤマシイ

0. Material Symbols を使わない
1. Material Symbols を Static font として使いたい
2. Material Symbols を Variable font として使いたい

各ページによって違う。「静的フォントで様々な軸を構成」したい場合、「細かく制御」したい場合、ライター自身が、（ number..number 形式で）、読み込む範囲を決めるのか？（ワズラワシイ＆メンドクサイ＆メンテナンス性が悪すぎる）

かといって、”全パターン” を想定したフォントファイル（WOFF2）は、10倍近く、2026KB もある。。。（”しかない” と考えるべき？）

▽とりあえずは “全パターン” で。。。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
<style type="text/css" id="material-css-nandezurennen">
.material-icons { display: inline-flex; vertical-align: middle; }
.material-icons-outlined { display: inline-flex; vertical-align: middle; }
.material-symbols-outlined { display: inline-flex; vertical-align: middle; }
</style>

（記事の途中で「そのFontファミリーを改めて読み込ませる」というワザは通用しない）

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

◆6-4. マニュアルの日本語がヘン

たまに「うーん」とか書いてある。（ウナリタイのは、たいがい読者の方だったりする。）

◆7. アレコレ実験中…

※”リクエスト” あれば是非！

“使い方” に関する情報は、まだまだ少ない。とりあえず “オフィシャル ” は、必読だと思う。

Material Symbols guide
- Using Material Symbols
  - Use in Web
    - Static font with Google Fonts
    - Variable font with Google Fonts
    - Self-hosting the font
    - Using the icons in HTML
    - Styling icons in Material Design
  - Use in Android
  - Use in iOS
  - Use in Flutter

<span class="material-symbols-outlined"
>add_circle</span>

<span class="material-symbols-outlined"
 style="font-variation-settings: 'FILL' 1;"
>add_circle</span>

<span class="material-symbols-outlined"
 style="font-variation-settings: 'opsz' 48;"
>add_circle</span>

<span class="material-symbols-outlined"
 style="font-variation-settings: 'FILL' 0, 'opsz' 40;"
>add_circle</span>

<span class="material-symbols-outlined"
 style="font-variation-settings: 'wght' 700, 'opsz' 40;"
>add_circle</span>

<span class="material-symbols-outlined"
 style="font-variation-settings: 'wght' 700, 'opsz' 40;
 background: black;"
>add_circle</span>

add_circle add_circle add_circle add_circle add_circle add_circle

<span class="material-symbols-outlined"
 style="
   font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48;
 "
>mail</span>

<span class="material-symbols-outlined"
 style="
   font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
 "
>mail</span>

<span class="material-symbols-outlined"
 style="
   font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 48;
 "
>mail</span>

<span class="material-symbols-outlined"
 style="
   font-variation-settings: 'FILL' 1, 'wght' 100, 'GRAD' 0, 'opsz' 48;
 "
>mail</span>

<span class="material-symbols-outlined"
 style="
   font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
 "
>mail</span>

<span class="material-symbols-outlined"
 style="
   font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
 "
>mail</span>

<span class="material-symbols-outlined"
 style="
   font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
 "
>mail</span>

<span class="material-symbols-outlined"
 style="
   font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
 "
>mail</span>

mail mail mail mail mail mail mail mail

<span class="material-symbols-outlined"
 style="
   font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
 "
>forward_to_inbox</span>

<span class="material-symbols-outlined"
 style="
   font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
 "
>forward_to_inbox</span>

<span class="material-symbols-outlined"
 style="
   font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
 "
>inbox</span>

<span class="material-symbols-outlined"
 style="
   font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
 "
>inbox</span>

<span class="material-symbols-outlined"
 style="
   font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
   font-size: 40px;
 "
>forward_to_inbox</span>

<span class="material-symbols-outlined"
 style="
   font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
   font-size: 40px;
 "
>forward_to_inbox</span>

<span class="material-symbols-outlined"
 style="
   font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
   font-size: 40px;
 "
>inbox</span>

<span class="material-symbols-outlined"
 style="
   font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
   font-size: 40px;
 "
>inbox</span>

forward_to_inbox forward_to_inbox inbox inbox forward_to_inbox forward_to_inbox inbox inbox

<script>
function user_enlargeIcon ( spanId ) {
  let elIcon = document.querySelector( "#" + spanId );
  elIcon.animate([
    {
      fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48",
      fontSize: "20px"
    },
    {
      fontVariationSettings: "'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48",
      fontSize: "80px"
    }
  ],{duration:5000,fill:'none',easing:'ease-in'});
}
</script>

<button type='button' onclick='user_enlargeIcon( "account_tree" );
'>Grow BIGGER</button>

<span class="material-symbols-outlined"
 id="account_tree"
>account_tree</span>

account_tree

◆◆追記

やはり「HTML入力」は現実的ではない。「ショートコード入力」を可能とする Plugin を作って試用中。

[gfmi name=home] と入力すれば
- Material Icons の home アイコン（Filled）が表示される。
[gfmio name=home] と入力すれば
- Material Icons の home アイコン（Outlined）が表示される。
[gfmso name=home] と入力すれば
- Material Symbols の home アイコン（Outlined）が表示される。
- [gfmso name=home fill=1] と入力すれば『’FILL’ 1』の状態が表示される。

add_shortcode ( 'gfmi', 'q_gfmi' );
// https://developer.wordpress.org/reference/functions/add_shortcode/

function q_gfmi ( $atts ) {
  //// set default
  $supported_attributes = array(
    'name' => 'home', 
  );
  //// get shortcode attributes
  $atts = shortcode_atts( $supported_attributes, $atts, 'gfmi' );
    // https://developer.wordpress.org/reference/functions/shortcode_atts/
  //// build up the output string
  $output  = '<span class="material-icons">';
  $output .= $atts['name'];
  $output .= '</span>';
  return $output;
}

Googleアイコン “Material Icons” と “Material Symbols”

◆0. Material Symbols

◆1. アイコンの “可能性” について

◆2. 使いやすいアイコンは無いものか？

◆3. 可変フォント技術！？

◆4. 習うより慣れよ！！

◆5. 使い方

◆ 5-0. Material Icons の場合

◆5-1. Material Symbols の場合

◆5-2. Font Awesome の場合

◆6. 発生したトラブル

◆6-1. アイコン表示位置が上下にズレる

◆6-2. WordPress エディタとの相性はヨクナイ

◆6-3. あるべきCSSの読み込み範囲がナヤマシイ

◆6-4. マニュアルの日本語がヘン

◆7. アレコレ実験中…

◆◆追記

いいね:

関連

About The Author

IMAMURA, Genichi

コメントを残すコメントをキャンセル

Googleアイコン “Material Icons” と “Material Symbols”

◆0. Material Symbols

◆1. アイコンの “可能性” について

◆2. 使いやすいアイコンは無いものか？

◆3. 可変フォント技術！？

◆4. 習うより慣れよ！！

◆5. 使い方

◆ 5-0. Material Icons の場合

◆5-1. Material Symbols の場合

◆5-2. Font Awesome の場合

◆6. 発生したトラブル

◆6-1. アイコン表示位置が上下にズレる

◆6-2. WordPress エディタとの相性はヨクナイ

◆6-3. あるべきCSSの読み込み範囲がナヤマシイ

◆6-4. マニュアルの日本語がヘン

◆7. アレコレ実験中…

◆◆追記

共有:

いいね:

関連

About The Author

IMAMURA, Genichi

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル