Fix material icons

googlefonts · Oct 9, 2023 · 491119a · 491119a
1 parent 02c847c
commit 491119a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 11 deletions.
diff --git 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>
+</div>
diff --git 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
@@ -8,29 +8,37 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/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,[email protected],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
@@ -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
@@ -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>