Material Icons Material Symbols Font Awesome

アイコンには “言語の壁” を克服する可能性がある。なぜなら「全人類が理解できる」からだ。しかも「スグに理解できる」という特性まで持ち合わせている。『アイコン〔愛〕は地球を救う』というオヤジギャグも、侮〔あなど〕れない。そして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 0FILL 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』も、その考え方自体に大差はない。

◆ 5-0. Material Icons の場合

<span class="material-icons">settings</span> と入力すれば

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

<span class="material-icons-outlined">settings</span> と入力すれば

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

(←注:”デフォルトの Filled” と “Outlined” は “別の形状” のあつかい)

◆5-1. Material Symbols の場合

<span class="material-symbols-outlined">settings</span> と入力すると

settings と表示される。

<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">settings</span> と入力すれば

settings と表示される。

◆5-2. Font Awesome の場合

<i class="fa-solid fa-gear"></i> と入力すると

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

◆6. 発生したトラブル

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

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

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

  • display: inline-blockdisplay: 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
No-Code ワークフロー

◆◆追記

やはり「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;
}

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Scroll to Top
%d人のブロガーが「いいね」をつけました。