Replace usages of Font Awesome with Material Icons (#5013)

This replaces the remaining usages of Font Awesome with Material Icons
and removes Font Awesome. The way we are using Font Awesome is resulting
in a 436kB download then JS running on top of that. Before even
considering the JS parsing/running, it accounts for 318ms out of 545ms
of the site load on my internet on Chrome Dev 116.

Fixes #3790

Author: parlough

_config.yml

@@ -96,30 +96,30 @@ og_image_vers: "?2"
 alert:
   important: >-
     <aside class="alert alert-warning" role="alert" markdown="1">
-    <i class="fas fa-exclamation-circle"></i> **Important:**
+    <i class="material-icons" aria-hidden="true">error</i> **Important:**
   info: >-
     <aside class="alert alert-info" role="alert" markdown="1">
-    <i class="fas fa-info-circle"></i>
+    <i class="material-icons" aria-hidden="true">info</i>
   note: >-
     <aside class="alert alert-info" role="alert" markdown="1">
-    <i class="fas fa-info-circle"></i> **Note:**
+    <i class="material-icons" aria-hidden="true">info</i> **Note:**
   flutter-note: >-
     <aside class="alert alert-info" role="alert" markdown="1">
     <img src="/assets/img/shared/flutter/icon/64.png" width="24" alt="Flutter logo"> **Flutter note:**
   version-note: >-
     <aside class="alert alert-info" role="alert" markdown="1">
-    <i class="fas fa-code-branch"></i> **Version note:**
+    <i class="material-icons" aria-hidden="true">merge_type</i> **Version note:**
   secondary: >-
     <aside class="alert alert-secondary" role="alert" markdown="1">
   tip: >-
     <aside class="alert alert-success" role="alert" markdown="1">
-    <i class="far fa-lightbulb"></i> **Tip:**
+    <i class="material-icons" aria-hidden="true">tips_and_updates</i> **Tip:**
   warn: >-
     <aside class="alert alert-warning" role="alert" markdown="1">
-    <i class="fas fa-exclamation-triangle"></i>
+    <i class="material-icons" aria-hidden="true">report_problem</i>
   warning: >-
     <aside class="alert alert-warning" role="alert" markdown="1">
-    <i class="fas fa-exclamation-triangle"></i> **Warning:**
+    <i class="material-icons" aria-hidden="true">report_problem</i> **Warning:**
   end: </aside>
 
 why:

src/_includes/head.html

@@ -63,10 +63,6 @@
   <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=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap" rel="stylesheet">
-  <script
-    src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"
-    data-auto-replace-svg="nest">
-  </script>
 
   <link rel="stylesheet" href="{{ '/assets/css/main.css' | append: cache_bust }}">
   {% for css in page.css -%}

src/_sass/_dash.scss

@@ -67,6 +67,11 @@ $dash-max-width: 1330px;
     color: $dash-dark-grey;
     margin-top: 16px;
 
+    & svg {
+      width: 1em;
+      height: 1em;
+    }
+
     @include bootstrap.media-breakpoint-down(md) {
       font-size: 14px;
       margin-left: 30px;
@@ -75,6 +80,7 @@ $dash-max-width: 1330px;
 
     a {
       color: $dash-dark-grey;
+      vertical-align: bottom;
 
       &:hover, &:focus, &:active {
         color: $white-base;

src/_sass/site.scss

@@ -573,6 +573,12 @@ h3.popover-header {
   margin-top: 1rem;
   padding: 30px 30px;
 
+  i.material-icons {
+    font-size: 20px;
+    user-select: none;
+    vertical-align: -4px;
+  }
+
   code {
     background-color: transparent;
   }

src/_tutorials/web/get-started.md

@@ -82,7 +82,7 @@ More information:
 
 ## 3. Get CLI tools or an IDE (or both)
 
-<i class="fas fa-terminal dark"></i>
+<i class="material-icons">terminal</i>
 If you like to use the command line, install [webdev][]:
 
 ```terminal
@@ -97,7 +97,7 @@ For a list of available IDEs, see the
 
 ## 4. Create a web app
 
-<i class="fas fa-terminal dark"></i>
+<i class="material-icons">terminal</i>
 To create a web app from the command line, use these commands:
 
 ```terminal
@@ -111,7 +111,7 @@ create a project using the template named **Bare-bones Web App**.
 
 ## 5. Run the app
 
-<i class="fas fa-terminal dark"></i>
+<i class="material-icons">terminal</i>
 To run the app from the command line, use [webdev][] to build and serve the app:
 
 ```terminal

src/index.html

@@ -38,7 +38,9 @@
     <div class="callout-oss">
         <p>Dart is free and open source
             &nbsp;<a href="https://github.com/dart-lang/" title="Dart project GitHub organization"
-            class="no-automatic-external"><i class="fab fa-github fa-sm"></i></a>
+            class="no-automatic-external">
+                <svg><use href="/assets/img/social/github.svg#github"></use></svg>
+            </a>
         </p>
     </div>
 
@@ -415,7 +417,7 @@ <h2>Try Dart in your browser</h2>
             <label for="dartpad-select" class="sr-only">Select an example:</label>
             <select id="dartpad-select"></select>
             <div id="dartpad-host"></div>
-            <h3>Want more practice? <a href="/language">Learn the language</a>, 
+            <h3>Want more practice? <a href="/language">Learn the language</a>,
                 explore the <a href="/guides/libraries/library-tour">core libraries</a>,
                 or <a href="/tutorials/server/get-started">build a command-line app</a>.</h3>
         </div>