Google Icon: Material Icons & Material Symbols

Icons have the potential to overcome language barriers because they can be understood by everyone, and they can be understood immediately. And now, in 2022, Google Icons seem to have moved. I’m a little late to the game, but I’m going to give it a try right away.

◆0. 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

◆1. The Possibilities of Icons

Icons (pictograms) are indispensable to human society.

• Road signs (, , ,)
• Danger signs ⇒ “ISO 7010”
• Olympic event guides
• Pictograms…

In recent years a common understanding has developed in the IT industry, that

• settings ← The gear icon is the settings menu
• menu ← The three-line icon (⇔ hamburger icon) is the main menu

In the future, the dependence on languages will decrease more and more. If the standardization of icons continues at this rate, it may become possible to use any language without feeling uncomfortable, even if the appropriate language is not selected. (Maybe the day is not far off when all mankind will be operating with the same interface.)

Is it because of the spread of smartphones with narrow screens? In any case, the culture of the last century of explaining things clearly with words has completely gone out of fashion.

◆2. Are There Any Easy to Use Icons?

All systems/software in the world should use the same icons. (originality should be kept to a minimum)

• Accessible to all
• Easy to use
• Free to use

Such an icon collection continues to be anticipated. As of today, the most promising are:

• Font Awesome and
• Google Fonts Material Icons

And in 2022, a sister collection to Google Fonts Material Icons appeared.

• Google Fonts Material Symbols

※ It is more like a parent-child version (i.e. slightly higher) than a sister version (where both are equal).

The Material Symbols font is the variable version of the Material Icons font.

https://material.io/blog/introducing-symbols (2022-04-19)

Incidentally, Questetra’s website uses Font Awesome, and in 2018 the company became a user of the paid version (Font Awesome Pro). In addition, Questetra products have recently introduced Google Fonts Material Icons by Google Inc. All the operation screens already have Google Icons (I think).

◆3. Variable Font Technology!?

In layman’s terms, it is a technology that covers the variation/customization of:

• FILL axis: Fill or not (Fill)
• wght axis: 7 levels of Weight (thickness)
• GRAD axis: Grade 3 levels (degree of embossment)
• opsz axis: Size 4 steps (size)

※ It does not cover the differences in shape (Outlined, Rounded, and Sharp).

★ For example, the “unselected” and “selected” states of an icon can be achieved by changing the CSS style from FILL 0 to FILL 1.

★ When “Fill” was made an on-off variable (0-1 variable), the two-tone icon (e.g. email) that existed in the Material Icons era could no longer exist (← the price of evolution).

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

In other words, what used to be done by replacing the unselected state icon with a selected state icon can now be done by changing a single icon.

• Animation “Web Animations API animate()” and other useful things!
• It may be useful for expressing pointer hover (CSS : hover), etc.!

Android’s Material Design icon font supports variable font technology
~4 styles in a single font file~

https://forest.watch.impress.co.jp/docs/news/1404656.html

Incidentally, an unfilled email in global standard Business Process Management Notation (BPMN) means incoming (Catch). A filled email means sending (Throw). Material Symbols can be displayed with the same font data! (How cool is that?)

▽ “Static font” mode

▽ “Variable font” mode

◆4. Better to Learn By Doing!

Google Fonts Material Symbols will be used in many fields.

The mere mention of being able to reduce the amount of font data is attractive enough. (Just the mention that it was created by Google?)

Therefore, I set up Google Fonts’ icon font Material Symbols and (Material Icons) so that they can be displayed on websites.

• help_outline What icons are available in Google Fonts Material Icons?
• help What icons are available in Google Fonts Material Symbols?
• How well does Google Fonts work with WordPress?
• What operations are required to edit a WordPress post?
• How is it different from FontAwesome?
• Where should icons be used in HTML text?
• And what is the point of having them alongside FontAwesome?

Questetra uses the cloud service WordPress.com (WordPress theme: Astra) as its Content Management System (CMS).

◆5. Directions

Basically, all you have to do is select an icon in the respective gallery and embed the code that appears. Material Symbols, Font Awesome and Material Icons are not all that different from each other.

• 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. In the Case of Material Icons

If you type <span class="material-icons">settings</span>

The filled character settings will be displayed.

If you type <span class="material-icons-outlined">settings</span>

The outlined character settings will be displayed.

(Note: Default Filled and Outlined are treated as different shapes.)

◆5-1. In the Case of Material Symbols

If you type <span class="material-symbols-outlined">settings</span>

settings will be displayed.

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

settings will be displayed.

◆5-2. In the Case of Font Awesome

If you type <i class="fa-solid fa-gear"></i>

◆6. Troubles that Occurred

◆6-1. Icon display position shifts up and down

WordPress administrative privileged users are to be set up with reference to the documentation.

• ◇ Material Icon Guide ＞ Web Icon Fonts
• ◇ Using Material Symbols ＞ Use on the Web ＞ Static fonts from Google Fonts

However, when used as is, there was a discrepancy. It seems that the reason is that the setting is 「line-hight:1, display:inline-block, …」. Although the intention is unclear, this trouble is avoided by applying the netizens’ recommendation of (↓ Static font / Variable font):

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

<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. Compatibility with WordPress Editor is Not Good

Like Font Awesome, Material Symbols (and Material Icons) are incompatible with the WordPress editor (Gutenberg).

Currently, if you use “Edit as HTML” for each block to input span tags, the input you have written may be rewritten. In particular, multi-level listings cannot be input.

It is a hassle to enter span tags when editing as HTML to begin with. Font Awesome is a stable editing tool because you don’t have to switch to Edit as HTML by entering a shortcode. (⇒Material Symbols (and Material Icons) should also be made into a plug-in)

◆6-3. The range of CSS loading that should be there is troubling

• 0. Don’t use Material Symbols
• 1. I want to use Material Symbols as a Static font
• 2. I want to use Material Symbols as Variable font

It depends on each page. If you want to compose various axes in a static font and want to control it in detail, does the writer themself decide the range to be read (in number..number format)? (This is too cumbersome, tedious & difficult to maintain.)

However, the font file (WOFF2) for the whole pattern is almost 10 times larger, 2026KB. (Should we assume that there is only one?)

▽ For the time being, all patterns should be considered…?

<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>

(The trick of loading that Font family again in the middle of an article does not work)

<!-- 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. The Japanese in the manual is strange

Sometimes it says, “Hmmm…” (It’s usually the readers who are annoyed.)

◆7. Experimenting With All Kinds of Things…

※ If you have any requests, I’d love to hear them!

There is still very little information on how to use the site. At any rate, I think the Official website is a must-read.

• 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>

<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>

<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>

<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>

◆◆ Addendum

HTML input is still not realistic. We have created a plugin that allows short code input and are currently testing it.

• If you type [gfmi name=home]
  • A Material Icons home icon (Filled) will be displayed
• If you type [gfmio name=home]
  • A Material Icons home icon (Outlined) will be displayed.
• If you type [gfmso name=home]
  • A Material Symbols home icon (Outlined) will be displayed.
  • If you type [gfmso name=home fill=1], the status “FILL: 1” will be displayed.

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;
}