Core Web Vitals: get rid of material font and replace it with inline svg

assets/css/itix.css

@@ -82,32 +82,6 @@
    font-display: swap;
 }
 
-@font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: url('/fonts/material-icons.woff2') format('woff2'),
-    url('/fonts/material-icons.ttf') format('truetype');
-}
-
-/*
- * The Google "Material Icons" font is used to render the tag icons, the
- * "back to top" link, etc.
- */
-.material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -moz-font-feature-settings: 'liga';
-  -moz-osx-font-smoothing: grayscale;
-}
-
 /*
  * General settings
  */
@@ -372,6 +346,7 @@ pre:hover {
   vertical-align: sub;
   margin-right: 3px;
   margin-left: 5px;
+  max-height: 1rem;
 }
 
 .post-metadata time {
@@ -632,7 +607,8 @@ article header h4 {
 }
 
 .actions .material-icons {
-  font-size: 2em;
+  height: 2rem;
+  width: auto;
 }
 
 /*

layouts/partials/head.html

@@ -21,8 +21,6 @@
 <link rel="preload" href="/fonts/JetBrainsMono-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
 <link rel="preload" href="/fonts/SourceSerifPro-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
 <link rel="preload" href="/fonts/SourceSansPro-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-<link rel="preload" href="/fonts/material-icons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-<link rel="preload" href="/fonts/material-icons.ttf" as="font" type="font/ttf" crossorigin="anonymous">
 
 <!--
   -- Ensure the <meta name=description> tag is never empty since it is used

layouts/partials/icons/label.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="material-icons">
+<title>label</title>
+<path d="M0 0h24v24H0z" fill="none"/>
+<path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z"/>
+</svg>

layouts/partials/icons/link.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="material-icons">
+<title>link</title>
+<path d="M0 0h24v24H0z" fill="none"/>
+<path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
+</svg>

layouts/partials/icons/schedule.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="material-icons">
+<title>schedule</title>
+<path d="M0 0h24v24H0z" fill="none"/>
+<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
+<path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
+</svg>

layouts/partials/icons/search.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="material-icons">
+<title>search</title>
+<path d="M0 0h24v24H0z" fill="none"/>
+<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+</svg>

layouts/partials/icons/vertical_align_top.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="material-icons">
+<title>back to top</title>
+<path d="M0 0h24v24H0z" fill="none"/>
+<path d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z"/>
+</svg>

layouts/partials/post-metadata.html

@@ -12,8 +12,7 @@
     <!-- Skip the item if we are on the term page presenting this item -->
     {{- if or (not $.parent.Data.topic) (ne . $.parent.Data.Term) }}
     <span class="topic">
-        <i class="material-icons" aria-hidden="true">link</i><a href="{{ "/topics/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
+        {{- partial "icons/link.svg" . -}}<a href="{{ "/topics/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
-        &nbsp;
     </span>
     {{- end -}}
     {{- end }}
@@ -23,8 +22,7 @@
     <!-- Skip the item if we are on the term page presenting this item -->
     {{- if or (not $.parent.Data.opensource) (ne . $.parent.Data.Term) }}
     <span class="opensource">
-        <i class="material-icons" aria-hidden="true">label</i><a href="{{ "/opensource/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
+        {{- partial "icons/label.svg" . -}}<a href="{{ "/opensource/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
-        &nbsp;
     </span>
     {{- end -}}
     {{- end }}
@@ -35,7 +33,7 @@
       -->
     {{- if eq .current.Type "blog" }}
         <span class="reading-time">
-        <i class="material-icons" aria-hidden="true">schedule</i>
+        {{- partial "icons/schedule.svg" . -}}
         {{- $minutes := .current.ReadingTime -}}
         {{- if gt $minutes 0 -}}
         {{- i18n "minutes" $minutes -}}

layouts/partials/toolbar.html

@@ -9,10 +9,10 @@
     {{- end }}
     <div class="actions">
         <a href="#top" class="action" title="{{ i18n "back_to_top" }}">
-            <i class="material-icons" aria-hidden="true">vertical_align_top</i>
+            {{- partial "icons/vertical_align_top.svg" . -}}
         </a>
         <a href="{{ relref . "/search/index.md" }}" class="action" title="{{ i18n "search" }}">
-            <i class="material-icons" aria-hidden="true">search</i>
+            {{- partial "icons/search.svg" . -}}
         </a>
     </div>
 </aside>