From 491119a2926faf777f49bdc8bd7b9c78869ad333 Mon Sep 17 00:00:00 2001
From: Simon Cozens <simon@simon-cozens.org>
Date: Mon, 9 Oct 2023 15:20:12 +0100
Subject: [PATCH] Fix material icons

---
 templates/fontbakery.html  |  4 ++--
 templates/gfrepo.html      |  2 +-
 templates/header.html      | 20 ++++++++++++++------
 templates/render_font.html |  2 +-
 templates/upstream.html    |  2 +-
 5 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/templates/fontbakery.html b/templates/fontbakery.html
index 8612c0ee..8934469c 100644
--- a/templates/fontbakery.html
+++ b/templates/fontbakery.html
@@ -2,7 +2,7 @@
     <div class="card-header">
         <h5 class="mb-0">
             <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#{{font.html_id}}_fbcard">
-                <span class="material-icons"></span>
+                <span class="material-symbols-outlined"></span>
                 Fontbakery checks
             </button>
         </h5>
@@ -28,4 +28,4 @@ <h6>Failing tests</h6>
             {% endif %}
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/gfrepo.html b/templates/gfrepo.html
index 6d6e24a8..f7b99a11 100644
--- a/templates/gfrepo.html
+++ b/templates/gfrepo.html
@@ -2,7 +2,7 @@
     <div class="card-header">
         <h5 class="mb-0">
             <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#{{font.html_id}}_gfcard">
-                <span class="material-icons"></span>
+                <span class="material-symbols-outlined"></span>
                 Google/Fonts Repo
             </button>
         </h5>
diff --git a/templates/header.html b/templates/header.html
index fb0713ed..d11eb40b 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -8,29 +8,37 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Google Fonts Dashboard</title>
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
     <style>
-    [data-bs-toggle="collapse"] .material-icons:before {
+    .material-symbols-outlined {
+        font-variation-settings:
+            'FILL'0,
+            'wght'400,
+            'GRAD'0,
+            'opsz'24
+    }
+
+    [data-bs-toggle="collapse"] .material-symbols-outlined:before {
         content: "\e5d6";
     }
 
-    [data-bs-toggle="collapse"].collapsed .material-icons:before {
+    [data-bs-toggle="collapse"].collapsed .material-symbols-outlined:before {
         content: "\e5d7";
     }
 
-    .material-icons {
+    .material-symbols-outlined {
         display: inline-block;
         vertical-align: middle;
         text-decoration: none !important;
     }
 
-    h6 .material-icons {
+    h6 .material-symbols-outlined {
         display: inline-flex;
         vertical-align: top;
         font-size: 1.1rem;
     }
 
-    .badge .material-icons {
+    .badge .material-symbols-outlined {
         display: inline-flex;
         vertical-align: top;
         font-size: 0.9rem;
diff --git a/templates/render_font.html b/templates/render_font.html
index 2648827a..26c17b14 100644
--- a/templates/render_font.html
+++ b/templates/render_font.html
@@ -1,6 +1,6 @@
 <div id="{{font.html_id}}">
     <h2 class="mb-4 mt-4"> {{ font.metadata.name }}
-        <a href="https://fonts.google.com/specimen/{{font.metadata.name | urlencode}}"><span class="material-symbols">link</span></a>
+        <a href="https://fonts.google.com/specimen/{{font.metadata.name | urlencode}}"><span class="material-symbols-outlined">link</span></a>
         <span class="version-badges">
             {% for badge in font.version_badges %}
             {{badge |safe}}
diff --git a/templates/upstream.html b/templates/upstream.html
index 517e8948..5240137f 100644
--- a/templates/upstream.html
+++ b/templates/upstream.html
@@ -2,7 +2,7 @@
     <div class="card-header">
         <h5 class="mb-0">
             <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#{{font.html_id}}_upstreamcard">
-                <span class="material-icons"></span>
+                <span class="mmaterial-symbols-outlined"></span>
                 Upstream Repo
             </button>
         </h5>