Switch icon set over to Material Icons intead of FontAwesome

docs/_static/copy.js

@@ -1,13 +1,13 @@
-const COPY = "fa-copy";
-const COPIED = "fa-clipboard-check";
+const COPY = "content_copy";
+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);
-      setTimeout(() => (icon.className = icon.className.replace(COPIED, COPY)), 2500);
+      icon.textContent = COPIED;
+      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");
-      copyIcon.className = "fas " + COPY;
+      let copyIcon = document.createElement("span");
+      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.classList.add("fa-bars");
+      button.textContent = "menu";
 
       // 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");
-    button.classList.toggle("fa-bars", !isHamburger);
-    button.classList.toggle("fa-times", isHamburger);
+    if (button.textContent == "menu") {
+      button.textContent = "close";
+    }
+    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 {
-  font-size: 2em;
+aside .material-icons,
+.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;
-}
-
-.copy > .fa-clipboard-check {
-  padding: 0 0.875px;
+  display: flex;
 }
 
 /* -- 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;
   }