Standardize icons on Material Symbols (dart-lang#5518)

Corresponds to flutter/website#10105

Fixes dart-lang#4278

Author: parlough

src/_11ty/plugins/markdown.js

@@ -53,7 +53,7 @@ function _registerAside(markdown, id, defaultTitle, icon, style) {
         const title = parsedArgs?.[1] ?? defaultTitle;
         return `<aside class="alert ${style}">
 <div class="alert-header">
-${icon !== null ? `<i class="material-icons" aria-hidden="true">${icon}</i>` : ''}
+${icon !== null ? `<i class="material-symbols" aria-hidden="true">${icon}</i>` : ''}
 <span>${title ?? ''}</span>
 </div>
 <div class="alert-content">
@@ -77,7 +77,7 @@ function _registerAsides(markdown) {
     markdown,
     'flutter-note',
     'Flutter note',
-    'smartphone',
+    'flutter',
     'alert-info',
   );
   _registerAside(
@@ -87,13 +87,13 @@ function _registerAsides(markdown) {
     'merge_type',
     'alert-info',
   );
-  _registerAside(markdown, 'tip', 'Tip', 'tips_and_updates', 'alert-success');
+  _registerAside(markdown, 'tip', 'Tip', 'lightbulb', 'alert-success');
   _registerAside(markdown, 'important', 'Important', 'error', 'alert-warning');
   _registerAside(
     markdown,
     'warning',
     'Warning',
-    'report_problem',
+    'warning',
     'alert-warning',
   );
 

src/_includes/head.html

@@ -65,7 +65,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Google+Sans+Display:wght@400&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/css2?family=Google+Sans+Text: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" />
 
   <link rel="stylesheet" href="{{ '/assets/css/main.css' | append: cache_bust }}">
   {% if css -%}

src/_includes/navigation-main.html

@@ -1,7 +1,7 @@
 {% assign page_url_path = page.url | regex_replace: '/index$|/index\.html$|\.html$|/$' | prepend: '/*' | append: '/' -%}
 
 <nav id="mainnav" class="site-header">
-  <div id="menu-toggle"><i class="material-icons">menu</i></div>
+  <div id="menu-toggle"><i class="material-symbols">menu</i></div>
   <a href="/" class="brand" title="{{site.title}}">
     <img src="/assets/img/logo/logo-white-text.svg" alt="{{site.title}}">
   </a>

src/_includes/navigation-toc-top.html

@@ -13,8 +13,8 @@
   <header class="site-toc__title">
     Contents
     {% if collapsible %}
-      <span class="site-toc--inline__toggle toc-toggle-down"><i class="material-icons">keyboard_arrow_down</i></span>
-      <span class="site-toc--inline__toggle toc-toggle-up"><i class="material-icons">keyboard_arrow_up</i></span>
+      <span class="site-toc--inline__toggle toc-toggle-down"><i class="material-symbols">keyboard_arrow_down</i></span>
+      <span class="site-toc--inline__toggle toc-toggle-up"><i class="material-symbols">keyboard_arrow_up</i></span>
     {% endif -%}
   </header>
   <ul class="section-nav">
@@ -34,7 +34,7 @@
     {% endfor -%}
   </ul>
   {% if collapsible %}
-    <span class="site-toc--inline__toggle toc-toggle-more-items"><i class="material-icons">more_horiz</i></span>
+    <span class="site-toc--inline__toggle toc-toggle-more-items"><i class="material-symbols">more_horiz</i></span>
   {% endif -%}
 </div>
 {% endif -%}

src/_includes/page-github-links.html

@@ -1,5 +1,5 @@
 {% comment %}
-This include file requires the material icons fonts.
+This include file requires the material symbols font.
 Style the button pair using the `#page-github-links` selector.
 {% endcomment -%}
 
@@ -12,10 +12,10 @@
 
 <div id="page-github-links" class="btn-group" aria-label="Page GitHub links" role="group">
   <a href="{{path}}" class="btn" title="View page source" target="_blank" rel="noopener">
-    <i class="material-icons">description</i>
+    <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" title="Report an issue with this page"
     target="_blank" rel="noopener">
-    <i class="material-icons">bug_report</i>
+    <i class="material-symbols">bug_report</i>
   </a>
 </div>

src/_sass/_site.scss

@@ -528,7 +528,7 @@ thead:has(th:empty) {
     margin-top: 0.5rem;
   }
 
-  i.material-icons {
+  i.material-symbols {
     font-size: 1.25em;
     user-select: none;
   }
@@ -573,8 +573,24 @@ thead:has(th:empty) {
   }
 }
 
+.material-symbols {
+  font-family: $site-font-family-icon;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
 /* Used for inlined icon markers, usually at the start of a paragraph */
-.content > p > i.material-icons {
+.content > p > i.material-symbols {
   vertical-align: bottom;
 }
 
@@ -639,7 +655,7 @@ ul.nav-list {
     }
   }
 
-  .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/components/_sidebar.scss

@@ -43,6 +43,8 @@
       content: 'keyboard_arrow_down';
       font: $site-font-icon;
       transition: transform .25s ease-in-out;
+      -webkit-font-feature-settings: 'liga';
+      -webkit-font-smoothing: antialiased;
     }
 
     &:not(.collapsed) {

src/_sass/core/_variables.scss

@@ -81,7 +81,7 @@ $site-font-family-gsans: 'Google Sans', 'Roboto', sans-serif;
 $site-font-family-gsans-display: 'Google Sans Display', 'Google Sans', 'Roboto', sans-serif;
 $site-font-family-base: 'Google Sans Text', 'Roboto', sans-serif;
 $site-font-family-alt: $site-font-family-gsans;
-$site-font-family-icon: 'Material Icons';
+$site-font-family-icon: 'Material Symbols Outlined';
 $site-font-family-monospace: 'Google Sans Mono', 'Roboto Mono', Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
 $site-font-icon: 24px/1 $site-font-family-icon;
 

src/content/index.html

@@ -32,7 +32,7 @@
     </div>
     <div class="callout-button">
         <button class="btn btn-link btn-icon" type="button" data-toggle="modal" data-target="#videoModal" data-video="5F-6n_2XWR8">
-            <i class="material-icons">play_circle_filled</i> Watch video
+            <i class="material-symbols">play_circle</i> Watch video
         </button>
     </div>
 

src/content/resources/faq.md

@@ -4,7 +4,7 @@ short-title: FAQ
 description: You have questions about Dart, we have answers.
 ---
 
-{% assign pdf = '<i style="vertical-align: text-top" class="material-icons">picture_as_pdf</i>' %}
+{% assign pdf = '<i style="vertical-align: text-top" class="material-symbols">picture_as_pdf</i>' %}
 {% assign site-repo = site.gh-dart.site %}
 {% assign sdk-repo = site.gh-dart.sdk %}
 {% assign lang-repo = site.gh-dart.lang %}

src/content/tools/dart-devtools.md

@@ -13,12 +13,12 @@ and interact with tools such as IDEs, `dart run`, and `webdev`.
 The following table shows which tools
 you can use with common Dart app types.
 
-{% assign y = '<span class="material-icons user-select-none" title="Supported" aria-label="Supported">done</span>' %}
+{% assign y = '<span class="material-symbols user-select-none" title="Supported" aria-label="Supported">done</span>' %}
 {% assign b = '&nbsp;' %}
 {% assign na = '&nbsp;' %}
 {% comment %}
   Considered using this instead:
-  assign b = '<span class="material-icons" title="use browser tools instead">web</span>'
+  assign b = '<span class="material-symbols" title="use browser tools instead">web</span>'
 {% endcomment %}
 
 | Tool                  | [Flutter mobile or desktop][Flutter devtools] | [Flutter web][Flutter devtools] | [Other web][] | [Command-line][] |

src/content/web/get-started.md

@@ -17,14 +17,14 @@ Then follow the steps below to create a small web app with Dart.
 
 ## 2. Get CLI tools or an IDE (or both) {:#tools}
 
-<i class="material-icons">terminal</i>
+<i class="material-symbols">terminal</i>
 If you like to use the command line, install the [`webdev`][] package:
 
 ```console
 $ dart pub global activate webdev
 ```
 
-<i class="material-icons">web</i>
+<i class="material-symbols">web</i>
 Although using an IDE is optional, we highly recommend using one.
 For a list of available IDEs, see the
 [overview of editors & debuggers][].
@@ -33,23 +33,23 @@ For a list of available IDEs, see the
 
 ## 3. Create a web app {:#create}
 
-<i class="material-icons">terminal</i>
+<i class="material-symbols">terminal</i>
 To create a web app from the command line,
 use the [`dart create`][] command with the `web` template:
 
 ```console
 $ dart create -t web quickstart
 ```
 
-<i class="material-icons">web</i>
+<i class="material-symbols">web</i>
 To create the same web app from an IDE that has Dart integration,
 create a project using the template named **Bare-bones Web App**.
 
 [`dart create`]: /tools/dart-create
 
 ## 4. Run the app {:#run}
 
-<i class="material-icons">terminal</i>
+<i class="material-symbols">terminal</i>
 To run the app from the command line,
 use [`webdev`][] to build and serve the app:
 
@@ -58,7 +58,7 @@ $ cd quickstart
 $ webdev serve
 ```
 
-<i class="material-icons">web</i>
+<i class="material-symbols">web</i>
 Or run the app from your IDE.
 
 To view your app, use the Chrome browser