Switch icon set over to Material Icons intead of FontAwesome

docs/_static/copy.js

@@ -1,13 +1,13 @@
-const COPY = "fa-copy";
+const COPY = "content_copy";
-const COPIED = "fa-clipboard-check";
+const COPIED = "done";
 
 const copy = async (obj) => {
-  // <div><span class="copy">  <i class="fas ...">the icon element</i>  </span><pre> code </pre></div>
+  // <span class="copy"><span class="material-icons">{{text}}</span></span>
   await navigator.clipboard.writeText(obj.children[1].innerText).then(
     () => {
       let icon = obj.children[0].children[0];
-      icon.className = icon.className.replace(COPY, COPIED);
+      icon.textContent = COPIED;
-      setTimeout(() => (icon.className = icon.className.replace(COPIED, COPY)), 2500);
+      setTimeout(() => (icon.textContent = COPY), 2500);
     },
     (r) => alert('Could not copy codeblock:\n' + r.toString())
   );
@@ -24,8 +24,9 @@ document.addEventListener("DOMContentLoaded", () => {
       copyEl.setAttribute("aria-label", "Copy Code");
       copyEl.setAttribute("title", "Copy Code");
 
-      let copyIcon = document.createElement("i");
+      let copyIcon = document.createElement("span");
-      copyIcon.className = "fas " + COPY;
+      copyIcon.className = "material-icons";
+      copyIcon.textContent = COPY;
       copyEl.append(copyIcon);
 
       codeblock.prepend(copyEl);

docs/_static/custom.js

@@ -71,8 +71,7 @@ document.addEventListener('DOMContentLoaded', () => {
     if (e.target.tagName == "A" && sidebar.classList.contains("sidebar-toggle")) {
       sidebar.classList.remove("sidebar-toggle");
       let button = hamburgerToggle.firstElementChild;
-      button.classList.remove("fa-times");
+      button.textContent = "menu";
-      button.classList.add("fa-bars");
 
       // Scroll a little up to actually see the header
       // Note: this is generally around ~55px
@@ -87,9 +86,12 @@ document.addEventListener('DOMContentLoaded', () => {
   hamburgerToggle.addEventListener("click", (e) => {
     sidebar.classList.toggle("sidebar-toggle");
     let button = hamburgerToggle.firstElementChild;
-    const isHamburger = button.classList.contains("fa-bars");
+    if (button.textContent == "menu") {
-    button.classList.toggle("fa-bars", !isHamburger);
+      button.textContent = "close";
-    button.classList.toggle("fa-times", isHamburger);
+    }
+    else {
+      button.textContent = "menu";
+    }
   });
 
   const tables = document.querySelectorAll('.py-attribute-table[data-move-to-id]');

docs/_static/style.css

@@ -329,9 +329,10 @@ aside h3 {
   float: right;
 }
 
-.fa-bars, .fa-times, .fa-cog {
+aside .material-icons,
-  font-size: 2em;
+.settings > .material-icons {
   cursor: pointer;
+  font-size: 2em;
 }
 
 .sidebar-toggle {
@@ -504,10 +505,7 @@ div.modal input {
   font-size: 0.875em;
   padding: 0.2em 0.5em;
   border-bottom-left-radius: 4px;
-}
+  display: flex;
-
-.copy > .fa-clipboard-check {
-  padding: 0 0.875px;
 }
 
 /* -- body styles --------------------------------------------------------- */
@@ -1131,10 +1129,6 @@ div.code-block-caption {
     width: 20%;
   }
 
-  .sub-header .fa-cog {
-    font-size: 1.5em;
-  }
-
   .py-attribute-table-column:not(:first-child) {
     margin-top: unset;
   }

docs/_templates/layout.html

@@ -6,7 +6,7 @@
   <title>{{ title|striptags|e }}{{ titlesuffix }}</title>
   {%- block extrahead %} {% endblock %}
   <!-- end extra head -->
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link rel="stylesheet" href="{{ pathto('_static/style.css', 1)|e }}" type="text/css" />
   <link rel="stylesheet" href="{{ pathto('_static/codeblocks.css', 1) }}" type="text/css" />
   {%- block css %}
@@ -81,19 +81,19 @@
         <div class="searchwrapper">
           <input type="search" name="q" placeholder="{{ _('Search documentation') }}" />
           <button type="submit">
-            <i class="fas fa-search"></i>
+            <span class="material-icons">search</span>
           </button>
         </div>
       </form>
-      <a accesskey="S" class="settings" onclick="openModal(settingsModal);"><i class='fas fa-cog'></i></a>
+      <a accesskey="S" class="settings" onclick="openModal(settingsModal);"><span class="material-icons">settings</span></a>
     </div>
     {#- The sidebar component #}
     <aside class="grid-item">
       <span id="hamburger-toggle">
-        <i class="fa fa-bars"></i>
+        <span class="material-icons">menu</span>
       </span>
       <span id="settings-toggle" class="settings" onclick="openModal(settingsModal);">
-        <i class='fas fa-cog'></i>
+        <span class="material-icons">settings</span>
       </span>
       <div id="sidebar">
         {%- include "localtoc.html" %}
@@ -134,7 +134,9 @@
 
   <div id="settings" class="modal" onclick="if (event.target == this){ closeModal(settingsModal); }" hidden>
     <div class="modal-content">
-      <span class="close" onclick="closeModal(settingsModal);" title="Close"><i class='fas fa-times'></i></span>
+      <span class="close" onclick="closeModal(settingsModal);" title="Close">
+        <span class="material-icons">close</span>
+      </span>
       <h1>Settings</h1>
 
       <div class='setting'>