Moved search result icon to CSS for deduplication

material/assets/manifest.json

@@ -1,12 +1,12 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.5795c3cd.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.5795c3cd.min.js.map",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.02a83bbe.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.02a83bbe.min.js.map",
   "assets/javascripts/vendor.js": "assets/javascripts/vendor.186f2b9b.min.js",
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.186f2b9b.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.e0a2b82c.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.e0a2b82c.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.f6c1319f.min.css",
-  "assets/stylesheets/main.css.map": "assets/stylesheets/main.f6c1319f.min.css.map",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.3d7ab713.min.css",
+  "assets/stylesheets/main.css.map": "assets/stylesheets/main.3d7ab713.min.css.map",
   "assets/stylesheets/overrides.css": "assets/stylesheets/overrides.41a1bb10.min.css",
   "assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.41a1bb10.min.css.map",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.17bd0b03.min.css",

material/base.html

@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.f6c1319f.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.3d7ab713.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.17bd0b03.min.css' | url }}">
@@ -173,7 +173,7 @@
     </div>
     {% block scripts %}
       <script src="{{ 'assets/javascripts/vendor.186f2b9b.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.5795c3cd.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.02a83bbe.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

src/assets/javascripts/templates/search/index.tsx

@@ -45,20 +45,6 @@ const css = {
   terms:   "md-search-result__terms"
 }
 
-/* ------------------------------------------------------------------------- */
-
-/**
- * Path of `content-copy` icon
- */
-const path =
-  "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H13C12.59,21.75 12.2,21.44 " +
-  "11.86,21.1C11.53,20.77 11.25,20.4 11,20H6V4H13V9H18V10.18C18.71,10.34 " +
-  "19.39,10.61 20,11V8L14,2M20.31,18.9C21.64,16.79 21,14 " +
-  "18.91,12.68C16.8,11.35 14,12 12.69,14.08C11.35,16.19 12,18.97 " +
-  "14.09,20.3C15.55,21.23 17.41,21.23 " +
-  "18.88,20.32L22,23.39L23.39,22L20.31,18.9M16.5,19A2.5,2.5 0 0,1 " +
-  "14,16.5A2.5,2.5 0 0,1 16.5,14A2.5,2.5 0 0,1 19,16.5A2.5,2.5 0 0,1 16.5,19Z"
-
 /* ----------------------------------------------------------------------------
  * Helper function
  * ------------------------------------------------------------------------- */
@@ -83,11 +69,7 @@ function renderArticleDocument(
   return (
     <a href={location.toString().replace(/%20/g, "+")} class={css.link} tabIndex={-1}>
       <article class={css.article} data-md-score={score.toFixed(2)}>
-        <div class="md-search-result__icon md-icon">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-            <path d={path}></path>
-          </svg>
-        </div>
+        <div class="md-search-result__icon md-icon"></div>
         <h1 class={css.title}>{title}</h1>
         {teaser && text.length > 0 &&
           <p class={css.teaser}>{truncate(text, 320)}</p>

src/assets/stylesheets/main/layout/_nav.scss

@@ -341,16 +341,12 @@
         }
       }
 
-      // Navigation icon
-      .md-nav__icon {
+      // Flip icon vertically
+      .md-nav__icon::after {
 
         // Adjust for right-to-left languages
         [dir="rtl"] & {
-
-          // Flip icon vertically
-          &::after {
-            transform: scale(-1);
-          }
+          transform: scale(-1);
         }
       }
 

src/assets/stylesheets/main/layout/_search.scss

@@ -32,6 +32,13 @@ $md-toggle__search--checked:
 // Rules
 // ----------------------------------------------------------------------------
 
+// Icon definitions
+:root {
+  --md-search-result-icon: svg-load("@mdi/svg/svg/file-search-outline.svg");
+}
+
+// ----------------------------------------------------------------------------
+
 // Search container
 .md-search {
   position: relative;
@@ -646,17 +653,29 @@ $md-toggle__search--checked:
   &__icon {
     position: absolute;
     left: 0;
-    margin: px2rem(2px);
-    padding: px2rem(8px);
+    width: px2rem(24px);
+    height: px2rem(24px);
+    margin: px2rem(10px);
     color: var(--md-default-fg-color--light);
 
+    // Inline icon and adjust icon to match font size
+    &::after {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      background-color: currentColor;
+      mask-image: var(--md-search-result-icon);
+      mask-repeat: no-repeat;
+      content: "";
+    }
+
     // Adjust for right-to-left languages
     [dir="rtl"] & {
       right: 0;
       left: initial;
 
       // Flip icon vertically
-      svg {
+      &::after {
         transform: scaleX(-1);
       }
     }