refactor: Replace icon font with SVG icons

assets/js/darkmode.js

@@ -65,7 +65,7 @@
         label = button.dataset.switchToAuto;
       }
 
-      const iconElement = button.querySelector(".material-symbols-rounded");
+      const iconElement = button.querySelector(".a-icon");
       if (iconElement) {
         iconElement.dataset.icon = icon;
       }

assets/sass/content.scss

@@ -2,7 +2,7 @@
   font-size: 1.3rem;
 }
 
-.o-last-updated > .material-symbols-rounded::before {
+.o-last-updated > .a-icon {
   font-size: 1.5rem;
 }
 

assets/sass/contentNavigation.scss

@@ -33,6 +33,10 @@
   @media print {
     display: none;
   }
+
+  .a-icon {
+    font-size: 1.2em;
+  }
 }
 
 .o-aside__header {
@@ -49,9 +53,9 @@
 
   @include focus-indicator(0.1rem);
 
-  > .material-symbols-rounded {
+  > .a-icon {
     align-self: flex-start;
-    margin-top: 0.1rem;
+    margin-top: 0.3rem;
   }
 }
 
@@ -108,19 +112,22 @@
     padding-left: 0;
   }
 
-  &-date {
-    padding-left: 2.5rem;
+  &__date {
+    margin-left: 2.5rem;
+    position: relative;
+    top: -0.2rem;
   }
 
   p {
     margin-bottom: 0;
   }
-}
 
-.o-related__item figure {
-  border-radius: var(--border-radius-s);
+  &__item {
+    figure {
+      border-radius: var(--border-radius-s);
+    }
+  }
 }
-
 @media (max-width: #{$breakpoint-lg}) {
   .o-aside {
     position: fixed;

assets/sass/dropdown.scss

@@ -39,7 +39,7 @@
       color: var(--link-hovered);
       transition: color 0.3s ease;
 
-      & > :not(.material-symbols-rounded) {
+      & > :not(.a-icon) {
         text-decoration: underline;
       }
     }
@@ -49,7 +49,7 @@
     display: grid;
   }
 
-  &__button[aria-expanded="true"] &__icon {
+  &__button[aria-expanded="true"] .o-dropdown__icon .a-icon {
     transform: rotate(180deg);
   }
 
@@ -105,8 +105,7 @@
     }
   }
 
-  &__icon {
-    font-size: 0.7rem;
+  .o-dropdown__icon .a-icon {
     transition: transform 0.2s;
   }
 

assets/sass/expander.scss

@@ -39,7 +39,7 @@
     }
   }
 
-  > .material-symbols-rounded {
+  > .a-icon {
     transition: transform 0.2s;
 
     @media print {
@@ -133,7 +133,7 @@ details {
   }
 }
 
-details[open] > .o-expander__summary > .material-symbols-rounded {
+details[open] > .o-expander__summary > .a-icon {
   transform: rotate(180deg);
 }
 

assets/sass/fonts.scss

@@ -104,46 +104,21 @@
     U+2215, U+FEFF, U+FFFD;
 }
 
-/* material-symbols-rounded-latin-400-normal */
-@font-face {
-  font-family: "Material Symbols Rounded";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src:
-    url(@fontsource/material-symbols-rounded/files/material-symbols-rounded-latin-400-normal.woff2)
-      format("woff2"),
-    url(@fontsource/material-symbols-rounded/files/material-symbols-rounded-latin-400-normal.woff)
-      format("woff");
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
-    U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
 body,
 button {
   font-family: "Roboto", Arial, Helvetica, sans-serif;
   word-wrap: break-word;
   hyphens: auto;
 }
 
-.material-symbols-rounded::before {
-  content: attr(data-icon);
-  font-family: "Material Symbols Rounded";
-  font-weight: normal;
-  font-style: normal;
+.a-icon {
   display: inline-block;
-  font-size: 2rem;
+  width: 1em;
+  height: 1em;
   line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
   vertical-align: text-bottom;
   text-decoration: none;
-  width: 1em;
-  height: 1em;
   user-select: none;
+  background-color: currentColor;
+  mask: var(--icon-url) no-repeat center / contain;
 }

assets/sass/navigation.scss

@@ -135,7 +135,7 @@ menu > li > menu {
 
   &:hover,
   &:focus {
-    :not(.material-symbols-rounded) {
+    :not(.a-icon) {
       text-decoration: underline;
     }
     color: var(--link-hovered);
@@ -150,7 +150,7 @@ menu > li > menu {
     display: none;
   }
 
-  > .material-symbols-rounded {
+  > .a-icon {
     margin-left: 0.8rem;
     align-self: center;
     text-decoration: none;
@@ -233,6 +233,10 @@ menu > li > menu {
   &:hover {
     color: var(--link-hovered);
   }
+
+  > .a-icon {
+    font-size: 1.15em;
+  }
 }
 
 body:has(.o-header__nav--open) {

assets/sass/search.scss

@@ -17,15 +17,19 @@ $search-z-index-focus: 12;
       position: relative;
 
       &::before {
-        content: "search";
+        content: "";
+        display: block;
         position: absolute;
-        top: 23px;
+        top: 22px;
         left: 20px;
         z-index: $search-z-index + 1;
-        font-family: "Material Symbols Rounded";
+        width: 2.4rem;
+        height: 2.4rem;
+        background-color: currentColor;
+        mask: url("/icons/material-symbols-rounded/search.svg") no-repeat
+          center / contain;
         opacity: 0.7;
         pointer-events: none;
-        line-height: 1;
       }
     }
 
@@ -148,8 +152,13 @@ $search-z-index-focus: 12;
         }
 
         .pagefind-ui__result-link::before {
-          content: "subdirectory_arrow_right";
-          font-family: "Material Symbols Rounded";
+          content: "";
+          display: block;
+          width: 1.8rem;
+          height: 1.8rem;
+          background-color: currentColor;
+          mask: url("/icons/material-symbols-rounded/subdirectory_arrow_right.svg")
+            no-repeat center / contain;
           position: absolute;
           left: -2.4rem;
         }

assets/sass/startpage.scss

@@ -45,6 +45,10 @@
   gap: 2rem;
   margin-bottom: 2rem;
 
+  @media (max-width: #{$breakpoint-xl}) {
+    grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
+  }
+
   @media (max-width: #{$breakpoint-lg}) {
     display: flex;
     gap: 1rem;

assets/sass/styles.scss

@@ -79,12 +79,12 @@ a,
     text-decoration: none;
     color: var(--bs-body-color);
 
-    > .material-symbols-rounded {
+    > .a-icon {
       display: none;
     }
   }
 
-  & > .material-symbols-rounded {
+  & > .a-icon {
     margin: 0 0.2rem;
   }
 }
@@ -205,10 +205,6 @@ figure {
   }
 }
 
-.o-related__date {
-  margin-left: 2.4rem;
-}
-
 .o-list__list {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
@@ -439,7 +435,7 @@ details > summary {
 
 .o-link__mail,
 .o-link__tel {
-  & > .material-symbols-rounded {
+  & > .a-icon {
     margin-right: 0.4rem;
   }
 }

assets/sass/teaser.scss

@@ -23,7 +23,7 @@
 
   @include focus-indicator(0.3rem);
 
-  .material-symbols-rounded::before {
+  .a-icon {
     font-size: 2.4rem;
     margin-top: 1rem;
   }
@@ -110,7 +110,7 @@
   flex-direction: column;
   justify-content: space-between;
 
-  > .material-symbols-rounded {
+  > .a-icon {
     @media print {
       display: none;
     }

hugo.yaml

@@ -30,6 +30,8 @@ module:
       target: "static"
     - source: "node_modules/@fontsource"
       target: "static/css/@fontsource"
+    - source: "node_modules/@material-symbols/svg-700/rounded"
+      target: "static/icons/material-symbols-rounded"
 
 related:
   includeNewer: true

layouts/_default/rss.xml

@@ -10,8 +10,7 @@
         <item>
             <title>{{ .Title }}</title>
             <link>{{ .Permalink }}</link>
-            <!-- Remove the icons and XML escape the summary -->
-            {{ $cleanedHTML := partial "strip-material-icons" .Summary | transform.XMLEscape | safeHTML}}
+            {{ $cleanedHTML := .Summary | plainify | transform.XMLEscape | safeHTML }}
             <description>{{ $cleanedHTML }}</description>
             <pubDate>{{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
             <enclosure url="{{ (partial "helper/contentImage" . ).Permalink }}" />

layouts/news/single.html

@@ -15,9 +15,9 @@ <h3 id="o-related__title">{{ T "news.further" }}</h3>
                 )
               }}
               {{ if eq .Page.Type "news" }}
-                <span class="o-related__date"
-                  >{{ .Date | time.Format ":date_long" }}</span
-                >
+                <span class="o-related__date">
+                  {{ .Date | time.Format ":date_long" }}
+                </span>
               {{ end }}
             </li>
           {{ end }}

layouts/partials/icon.html

@@ -1,8 +1,9 @@
 <span
   data-pagefind-ignore="all"
-  class="material-symbols-rounded"
+  class="a-icon"
   translate="no"
   aria-hidden="true"
   data-icon="{{ . }}"
+  style="--icon-url: url('/icons/material-symbols-rounded/{{ . }}.svg');"
 ></span>
 {{- /* Needed, otherwise links break: https://github.com/fipguide/fipguide.github.io/issues/116 */ -}}

layouts/partials/teaser.html

@@ -23,7 +23,7 @@ <h3 class="m-teaser__headline">{{ $page.Title }}</h3>
 
 
       <div class="m-teaser__text">
-        {{ partial "strip-material-icons" $page.Summary | plainify | truncate 500 }}
+        {{ $page.Summary | plainify | truncate 500 }}
       </div>
       {{- partial "icon" "arrow_forward" -}}
     </div>