hugo: migrate font icons to svg

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>

assets/css/global.css

@@ -19,8 +19,8 @@
   }
 
   .external-link {
-    .icon:after {
-      @apply text-base ml-1;
+    .icon-svg svg {
+      @apply text-base ml-1 align-top;
     }
   }
 

assets/css/icons.css

@@ -4,25 +4,8 @@
       font-size: 24px;
       width: 1em;
       height: 1em;
+      display: inline-block;
       fill: currentColor;
     }
   }
-
-  .icon {
-    font-family: "Material Symbols Rounded";
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px; /* Preferred icon size */
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-    direction: ltr;
-  }
-
-  .icon:after {
-    content: attr(data-icon);
-  }
 }

content/admin/organization/_index.md

@@ -21,7 +21,7 @@ grid:
   link: /admin/organization/registry-access/
 - title: General settings
   description: Configure general information or create a company.
-  icon: settings_suggest
+  icon: settings
   link: /admin/organization/general-settings/
 - title: SSO & SCIM
   description: 'Set up [Single Sign-On](/security/for-admins/single-sign-on/)
@@ -45,4 +45,4 @@ To create an organization, see [Create your organization](../organization/orgs.m
 
 Learn how to administer an organization in the following sections.
 
-{{< grid >}}
+{{< grid >}}

content/compose/compose-file/_index.md

@@ -26,7 +26,7 @@ grid:
   link: /compose/compose-file/07-volumes/
 - title: Configs top-level element
   description: Find out about configs in Compose.
-  icon: settings_suggest
+  icon: settings
   link: /compose/compose-file/08-configs/
 - title: Secrets top-level element
   description: Learn about secrets in Compose.
@@ -57,4 +57,4 @@ The Compose Specification on Docker Docs is the Docker Compose implementation. I
 
 Use the following links to navigate key sections of the Compose Specification. 
 
-{{< grid >}}
+{{< grid >}}

content/contribute/components/icons.md

@@ -51,8 +51,8 @@ grid:
     icon: "publish"
     description: Icon name = publish
   - title: "Interacting"
-    icon: "multiple_stops"
-    description: Icon name = multiple_stops
+    icon: "multiple_stop"
+    description: Icon name = multiple_stop
   - title: "Storage"
     icon: "database"
     description: Icon name = database
@@ -141,8 +141,8 @@ grid:
     description: Icon name = supervised_user_circle
     icon: supervised_user_circle
   - title: "General settings"
-    icon: "settings_suggest"
-    description: Icon name = settings_suggest
+    icon: "settings"
+    description: Icon name = settings
 ---
 
 Below is an inventory of the icons we use to represent different topics or features across docs. To be used with the [cards component](cards.md).

content/reference.md

@@ -41,7 +41,7 @@ grid_apis:
   link: /docker-hub/api/latest/
 - title: DVP Data API
   description: API for Docker Verified Publishers to fetch analytics data.
-  icon: auto_graph
+  icon: area_chart
   link: /docker-hub/api/dvp/
 grid_specs:
 - title: Image specification

content/release-notes.md

@@ -7,7 +7,7 @@ grid:
   icon: web_asset
   link: /desktop/release-notes/
 - title: Docker Engine
-  icon: settings_suggest
+  icon: developer_board
   link: /engine/release-notes/
 - title: Docker Compose
   icon: storage

layouts/_default/_markup/render-codeblock.html

@@ -1,13 +1,14 @@
 <div class="group relative">
   <button
-    x-data="{ code: '{{encoding.Base64Encode .Inner}}' }"
-    class="material-symbols-rounded hidden group-hover:block absolute top-3 right-3 text-gray-light-300 dark:text-gray-dark-600"
+    x-data="{ code: '{{encoding.Base64Encode .Inner}}', copying: false }"
+    class="absolute top-3 right-3 text-gray-light-300 dark:text-gray-dark-600"
     title="Copy"
     @click="window.navigator.clipboard.writeText(atob(code).replaceAll(/^\$\s*/gm, ''));
-    $el.textContent='check_circle';
-    setTimeout(() => $el.textContent='content_copy', 2000);"
+    copying = true;
+    setTimeout(() => copying = false, 2000);"
   >
-    content_copy
+    <span :class="{ 'group-hover:block' : !copying }" class="hidden icon-svg">{{ partial "icon" "content_copy" }}</span>
+    <span :class="{ 'group-hover:block' : copying }" class="hidden icon-svg">{{ partial "icon" "check_circle" }}</span>
   </button>
   {{ $result := transform.HighlightCodeBlock . }}
   <div class="syntax-light dark:syntax-dark">

layouts/_default/_markup/render-image.html

@@ -34,9 +34,9 @@
       class="fixed z-20 inset-0 flex items-center justify-center bg-black/70 p-6"
     >
       <button
-        class="material-symbols-rounded fixed z-30 top-6 right-8 text-white text-5xl"
+        class="text-white fixed z-30 top-6 right-8 icon-svg"
       >
-        close
+        {{ partial "icon" "close" }}
       </button>
       <img
         class="rounded max-w-full max-h-full"

layouts/_default/_markup/render-link.html

@@ -5,9 +5,11 @@
     class="link external-link"
     href="{{ $url | safeURL }}"
     target="_blank"
-    rel="noopener"
-    >{{ .Text | safeHTML }}<span
-      class="icon" data-icon="open_in_new"></span></a>
+    rel="noopener">
+      {{- .Text | safeHTML -}}
+      <span class="icon-svg">
+        {{- partial "icon" "open_in_new" -}}
+      </span></a>
 {{- else if (strings.HasPrefix $url "/") -}}
   {{/* absolute link, use url as-is */}}
   <a class="link" href="{{ $url }}">{{ .Text | safeHTML }}</a>

layouts/partials/components/accordion.html

@@ -1,10 +1,8 @@
 <div x-data="{ open: false }" class="border border-gray-light-200 dark:border-gray-dark-200 bg-white dark:bg-gray-dark-100">
   <button class="not-prose w-full py-2 px-4 flex justify-between" x-on:click="open = ! open">
     <span>{{ .title }}</span>
-    <span
-      class="material-symbols-rounded text-gray-light dark:text-gray-dark"
-      x-text="open ? 'expand_less' : 'expand_more'"
-    ></span>
+    <span :class="{ 'hidden' : !open }" class="icon-svg">{{ partial "icon" "expand_less" }}</span>
+    <span :class="{ 'hidden' : open }" class="icon-svg">{{ partial "icon" "expand_more" }}</span>
   </button>
 
   <div x-show="open" x-collapse class="px-4">

layouts/partials/components/card.html

@@ -33,7 +33,7 @@
             <img class="w-[32px] invertible" src="{{ . }}" alt="">
             {{ else }}
             {{/* icon ligature */}}
-            <span class="material-symbols-rounded text-[32px]">{{ . }}</span>
+            <span class="icon-svg">{{ partial "icon" . }}</span>
             {{ end }}
           {{ end }}
           <div>

layouts/partials/github-links.html

@@ -2,19 +2,22 @@
 {{ with .File }}
 {{ if not (in .Filename "/_vendor/") }}
 <p class="flex items-center gap-2">
-  <span class="material-symbols-rounded">edit</span>
+  <span class="icon-svg">{{ partial "icon" "edit" }}</span>
   <a class="link external-link" target="_blank" rel="noopener"
     href="{{ site.Params.repo }}/edit/main/content/{{ .Path }}">{{ T "editPage" }}
-    <span class="icon" data-icon="open_in_new"></span>
-  </a>
+    <span class="icon-svg">
+      {{- partial "icon" "open_in_new" -}}
+    </span></a>
 </p>
 {{ end }}
 {{ end }}
 <p class="flex items-center gap-2">
-  <span class="material-symbols-rounded">done</span>
+  <span class="icon-svg">{{ partial "icon" "done" }}</span>
   <a class="link external-link" target="_blank" rel="noopener"
     href="{{ site.Params.repo }}/issues/new?template=doc_issue.yml&location={{ .Permalink }}&labels=status%2Ftriage">{{ T "requestChanges" }}
-    <span class="icon" data-icon="open_in_new"></span>
+    <span class="icon-svg">
+      {{- partial "icon" "open_in_new" -}}
+    </span></a>
   </a>
 </p>
 {{ end }}

layouts/partials/head.html

@@ -39,7 +39,6 @@
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=optional" />
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=optional" />
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:FILL@1" rel="stylesheet" />
 {{ partial "utils/css.html" . }}
 {{ $theme := resources.Get "js/theme.js" | js.Build (dict "minify" true) }}
 <script>{{ $theme.Content | safeJS }}</script>

layouts/partials/header.html

@@ -9,9 +9,8 @@
       } else {
         sidebar.classList.replace('md:block', 'md:hidden');
       }
-    }" class="btn-icon-round menu-btn material-symbols-rounded hidden h-full px-4 md:block" aria-label="Menu"
-        id="menu-btn">
-        menu
+      }" class="icon-svg hidden px-4 md:block" aria-label="Menu">
+        {{ partial "icon" "menu" }}
       </button>
       <div>
         {{/* main logo */}}
@@ -25,11 +24,14 @@
     </div>
     <div class="flex items-center gap-6">
       <div id="docsearch"></div>
-      <button id="theme-switch" tabindex="1" class="material-symbols-rounded"
+      <button id="theme-switch" tabindex="1" class="svg-icon"
         x-data="{ theme: localStorage.getItem('theme-preference') }" x-init="$watch('theme', value => {
         localStorage.setItem('theme-preference', value);
         document.firstElementChild.className = value;
-      })" @click="theme = (theme === 'dark' ? 'light' : 'dark')" x-text="`${theme}_mode`"></button>
+      })" @click="theme = (theme === 'dark' ? 'light' : 'dark')">
+        <span class="icon-svg dark:hidden">{{ partial "icon" "light_mode"}}</span>
+        <span class="icon-svg hidden dark:block">{{ partial "icon" "dark_mode"}}</span>
+      </button>
     </div>
   </div>