Standardize on Material Symbols (#10105)

Replaces all usages of Material Icons with Material Symbols, only
requiring us to bring in one of the two fonts.

Fixes #8984

_config.yml

@@ -211,27 +211,27 @@ alert:
     **Bonus questions!**
   important: >-
     <aside class="alert alert-warning alert-icon" role="alert" markdown="1">
-    <i class="material-icons" aria-hidden="true">error</i> **Important:**
+    <i class="material-symbols" aria-hidden="true">error</i> **Important:**
   info: >-
     <aside class="alert alert-info" role="alert" markdown="1">
-    <i class="material-icons" aria-hidden="true">info</i>
+    <i class="material-symbols" aria-hidden="true">info</i>
   note: >-
     <aside class="alert alert-info" role="alert" markdown="1">
-    <i class="material-icons" aria-hidden="true">info</i> **Note:**
+    <i class="material-symbols" aria-hidden="true">info</i> **Note:**
   version-note: >-
     <aside class="alert alert-info" role="alert" markdown="1">
-    <i class="material-icons" aria-hidden="true">merge_type</i> **Version note:**
+    <i class="material-symbols" aria-hidden="true">merge_type</i> **Version note:**
   recommend: >-
     <aside class="alert alert-success alert-icon" role="alert" markdown="1">
-    <i class="material-icons" aria-hidden="true">bolt</i>
+    <i class="material-symbols" aria-hidden="true">bolt</i>
   secondary: >-
     <aside class="alert alert-secondary" role="alert" markdown="1">
   tip: >-
     <aside class="alert alert-success" role="alert" markdown="1">
-    <i class="material-icons" aria-hidden="true">tips_and_updates</i> **Tip:**
+    <i class="material-symbols" aria-hidden="true">lightbulb</i> **Tip:**
   warning: >-
     <aside class="alert alert-warning" role="alert" markdown="1">
-    <i class="material-icons" aria-hidden="true">report_problem</i> **Warning:**
+    <i class="material-symbols" aria-hidden="true">warning</i> **Warning:**
   end: </aside>
 
 

src/_includes/docs/help-link.md

@@ -1,6 +1,6 @@
 <p class="install-help">
     <a id='{{ include.location }}' href='{{site.url}}/get-started/install/help{{ include.section }}'>
-    <span class='material-icons'>help</span>
+    <span class='material-symbols'>help</span>
     <span>Help</span>
     </a>
 </p>

src/_includes/header.html

@@ -10,7 +10,7 @@
       aria-controls="navbarSupportedContent"
       aria-expanded="false"
       aria-label="Toggle navigation">
-      <i class="material-icons">menu</i>
+      <i class="material-symbols">menu</i>
     </button>
 
     <a class="navbar-brand" href="{{site.url}}">

src/_includes/page-github-links.html

@@ -0,0 +1,21 @@
+{% comment %}
+This include file requires the material symbols font.
+Style the button pair using the `#page-github-links` selector.
+{% endcomment -%}
+
+{% assign repo = page.repo | default: site.repo.this -%}
+{% capture path -%} {{repo}}/tree/{{site.branch}}/{{site.source}}/{{page.path}} {%- endcapture -%}
+{% assign title = page.title | default: page.url -%}
+{% assign url = site.url | append: page.url -%}
+
+{% capture issueTitle -%} title=[PAGE ISSUE]: '{{title}}' {%- endcapture -%}
+
+<div id="page-github-links" class="btn-group" aria-label="Page GitHub links" role="group">
+  <a href="{{path}}" class="btn no-automatic-external" title="View page source" target="_blank" rel="noopener">
+    <i class="material-symbols">description</i>
+  </a>
+  <a href="{{repo}}/issues/new?template=1_page_issue.yml&{{issueTitle}}&page-url={{url}}&page-source={{path}}" class="btn no-automatic-external" title="Report an issue with this page"
+    target="_blank" rel="noopener">
+    <i class="material-symbols">bug_report</i>
+  </a>
+</div>

src/_layouts/base.html

@@ -57,7 +57,6 @@
     <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400;500;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Google+Sans+Mono:wght@400;500;700&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet" />
     {% endunless -%}
 

src/_layouts/default.html

@@ -32,7 +32,7 @@
         {% include_cached next-prev-nav.html prev=page.prev next=page.next %}
 
         <header class="site-content__title">
-          {% include shared/page-github-links.html %}
+          {% include page-github-links.html %}
           <h1>{{ page.title }}</h1>
           {% if page.show_breadcrumbs -%}
             {% include shared/breadcrumbs.html %}

src/_plugins/code_excerpt.rb

@@ -32,7 +32,7 @@ def render(context)
         # <button class="code-excerpt__copy-btn" type="button"
         #     data-toggle="tooltip" title="Copy code"
         #     data-clipboard-target="##{id}">
-        #   <i class="material-icons">content_copy</i>
+        #   <i class="material-symbols">content_copy</i>
         # </button>
         # <div id="#{id}">
         # #{super(context)}

src/_sass/base/_base.scss

@@ -70,7 +70,7 @@ dd {
   color: $site-color-body;
 }
 
-.d-block.h1 > .material-icons {
+.d-block.h1 > .material-symbols {
   font-size: 3rem;
 }
 
@@ -134,8 +134,27 @@ dd {
   }
 }
 
-.material-icons {
-  font: $site-font-icon;
+.material-symbols {
+  font-family: $site-font-family-icon;
+  font-variation-settings:
+          'FILL' 0,
+          'wght' 400,
+          'GRAD' 0,
+          'opsz' 24;
+
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  vertical-align: middle;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
 }
 
 .site-mobile-screenshot {
@@ -207,7 +226,7 @@ dd {
   display: flex;
   justify-content: center;
 
-  .material-icons {
+  .material-symbols {
     margin-right: bootstrap.bs-spacer(2);
   }
 }
@@ -258,7 +277,7 @@ dd {
     }
   }
 
-  .material-icons {
+  .material-symbols {
     font-size: 20px;
     margin-right: 0.125rem;
   }
@@ -316,15 +335,6 @@ td ol, td ul, td dl, td p {
   color: #041E3C;
 }
 
-.material-symbols-outlined {
-  font-variation-settings:
-  'FILL' 0,
-  'wght' 400,
-  'GRAD' 0,
-  'opsz' 24;
-  vertical-align: middle;
-}
-
 aside {
   .alert {
     h2, h3, h4, h5, h6 {

src/_sass/base/_variables.scss

@@ -25,7 +25,7 @@ $twitter-color: #60CAF6;
 $font-size-base-weight: 400;
 $site-font-family-base: 'Google Sans Text', 'Roboto', sans-serif;
 $site-font-family-alt: 'Google Sans', 'Google Sans Text', 'Roboto', sans-serif;
-$site-font-family-icon: 'Material Icons';
+$site-font-family-icon: 'Material Symbols Outlined';
 $site-font-family-monospace: 'Google Sans Mono', 'Roboto Mono', monospace;
 $site-font-icon: 24px/1 $site-font-family-icon;
 

src/_sass/components/_content.scss

@@ -54,7 +54,7 @@
           }
         }
 
-        .material-icons {
+        .material-symbols {
           font-size: 18px;
         }
       }

src/_sass/components/_header.scss

@@ -22,7 +22,7 @@
       margin-right: bootstrap.bs-spacer(4);
       padding: 0;
 
-      .material-icons {
+      .material-symbols {
         font-size: 28px;
       }
     }

src/_sass/pages/_clock.scss

@@ -728,7 +728,7 @@
         user-select: text;
         width: 100%;
 
-        .material-icons {
+        .material-symbols {
           user-select: none;
         }
       }

src/_sass/vendor/_bootstrap.scss

@@ -84,7 +84,7 @@
   > p:last-child { margin-bottom: 0; }
   > ul:last-child { margin-bottom: 0; }
 
-  i.material-icons {
+  i.material-symbols {
     font-size: 20px;
     user-select: none;
     vertical-align: -4px;

src/assets/js/main.js

@@ -288,7 +288,7 @@ function addCopyCodeButtonsEverywhere() {
         '<button class="code-excerpt__copy-btn" type="button"' +
         '    data-toggle="tooltip" title="Copy code"' +
         '    data-clipboard-target="#code-excerpt-' + i + '">' +
-        '  <i class="material-icons">content_copy</i>' +
+        '  <i class="material-symbols">content_copy</i>' +
         '</button>';
     });
 }

src/clock/index.html

@@ -28,10 +28,10 @@
             <h1 class="heading">Flutter Clock Challenge</h1>
             <p>
                 <a class="youtube-link" href="#" data-video="rxs69_szCkE" data-toggle="modal" data-target="#videoModal">
-                    <i class="material-icons">play_circle_filled</i> Watch video
+                    <i class="material-symbols">play_circle</i> Watch video
                 </a>
                 <a class="results-link" href="https://medium.com/p/dcebe2eb3957" target="_blank">
-                    <i class="material-icons">emoji_events</i> Results
+                    <i class="material-symbols">trophy</i> Results
                 </a>
             </p>
         </div>
@@ -200,7 +200,7 @@ <h2 class="subheading">FAQ</h2>
                         <div class="faqs_card-header" id="faq-heading{{forloop.index}}">
                             <button class="faqs_button dropdown__button btn btn-link" data-toggle="collapse" data-target="#faq-collapse{{forloop.index}}" aria-expanded="false" aria-controls="faq-collapse{{forloop.index}}">
                                 {{ faq.title }}
-                                <i class="material-icons">keyboard_arrow_down</i>
+                                <i class="material-symbols">keyboard_arrow_down</i>
                             </button>
                         </div>
                         <div id="faq-collapse{{forloop.index}}" class="collapse" aria-labelledby="faq-heading{{forloop.index}}" data-parent="#accordion{{forloop.index}}">

src/get-started/install/_help-link.md

@@ -1,6 +1,6 @@
 <p class="install-help">
     <a id='{{ include.location }}' href='{{site.url}}/get-started/install/help{{ include.section }}'>
-    <span class='material-icons'>help</span>
+    <span class='material-symbols'>help</span>
     <span>Help</span>
     </a>
 </p>

src/get-started/install/macos/index.md

@@ -15,13 +15,13 @@ target-list: [Desktop, Mobile-iOS, Mobile-Android, Web]
         <span class="d-block h1">
           {% assign icon = target | downcase -%}
           {% if icon == 'desktop' -%}
-            <span class="material-icons">laptop_mac</span>
+            <span class="material-symbols">laptop_mac</span>
           {% elsif icon == 'mobile-ios' -%}
-            <span class="material-icons">phone_iphone</span>
+            <span class="symbols">phone_iphone</span>
           {% elsif icon == 'mobile-android' -%}
-            <span class="material-icons">phone_android</span>
+            <span class="material-symbols">phone_android</span>
           {% else -%}
-            <span class="material-icons">open_in_browser</span>
+            <span class="material-symbols">open_in_browser</span>
           {% endif -%}
         </span>
         <span class="text-muted text-nowrap">

src/get-started/install/windows/index.md

@@ -15,11 +15,11 @@ target-list: [Desktop, Mobile, Web]
         <span class="d-block h1">
           {% assign icon = target | downcase -%}
           {% if icon == 'desktop' -%}
-            <span class="material-icons">desktop_windows</span>
+            <span class="material-symbols">desktop_windows</span>
           {% elsif icon == 'mobile' -%}
-            <span class="material-icons">phone_android</span>
+            <span class="material-symbols">phone_android</span>
           {% else -%}
-            <span class="material-icons">open_in_browser</span>
+            <span class="material-symbols">open_in_browser</span>
           {% endif -%}
         </span>
         <span class="text-muted text-nowrap">{{target}}</span>

src/resources/games-toolkit.md

@@ -158,14 +158,14 @@ built with Flutter and Flame include
 Once you feel ready to go beyond these games templates,
 investigate other resources that our community recommended.
 
-{% assign pkg-icon = '<span class="material-symbols-outlined">package_2</span>' %}
-{% assign doc-icon = '<span class="material-symbols-outlined">quick_reference_all</span>' %}
-{% assign codelab = '<span class="material-symbols-outlined">science</span>' %}
-{% assign engine = '<span class="material-symbols-outlined">manufacturing</span>' %}
-{% assign tool-icon = '<span class="material-symbols-outlined">handyman</span>' %}
-{% assign recipe-icon = '<span class="material-symbols-outlined">book_5</span>' %}
-{% assign assets-icon = '<span class="material-symbols-outlined">photo_album</span>' %}
-{% assign api-icon = '<span class="material-symbols-outlined">api</span>' %}
+{% assign pkg-icon = '<span class="material-symbols">package_2</span>' %}
+{% assign doc-icon = '<span class="material-symbols">quick_reference_all</span>' %}
+{% assign codelab = '<span class="material-symbols">science</span>' %}
+{% assign engine = '<span class="material-symbols">manufacturing</span>' %}
+{% assign tool-icon = '<span class="material-symbols">handyman</span>' %}
+{% assign recipe-icon = '<span class="material-symbols">book_5</span>' %}
+{% assign assets-icon = '<span class="material-symbols">photo_album</span>' %}
+{% assign api-icon = '<span class="material-symbols">api</span>' %}
 
 {{ site.alert.secondary }}
   {{pkg-icon}} Flutter package<br>