Moved clipboard icon to CSS to reduce size of large projects

material/assets/manifest.json

@@ -1,12 +1,12 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.2854d19b.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.b0a2e822.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.2854d19b.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.b0a2e822.min.js.map",
   "assets/javascripts/vendor.js": "assets/javascripts/vendor.48dbe4ba.min.js",
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.48dbe4ba.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.fae956e7.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.fae956e7.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.e620dc14.min.css",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.ff5e881c.min.css",
-  "assets/stylesheets/main.css.map": "assets/stylesheets/main.e620dc14.min.css.map",
+  "assets/stylesheets/main.css.map": "assets/stylesheets/main.ff5e881c.min.css.map",
   "assets/stylesheets/overrides.css": "assets/stylesheets/overrides.9399043a.min.css",
   "assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.9399043a.min.css.map",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.a99d9558.min.css",

material/base.html

@@ -41,7 +41,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.e620dc14.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.ff5e881c.min.css' | url }}">
       {% if palette.scheme or palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.a99d9558.min.css' | url }}">
       {% endif %}
@@ -183,7 +183,7 @@
     </div>
     {% block scripts %}
       <script src="{{ 'assets/javascripts/vendor.48dbe4ba.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.2854d19b.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.b0a2e822.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

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

@@ -33,15 +33,6 @@ const css = {
   container: "md-clipboard md-icon"
 }
 
-/* ------------------------------------------------------------------------- */
-
-/**
- * Path of `file-search-outline` icon
- */
-const path =
-  "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 " +
-  "21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
-
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -61,10 +52,6 @@ export function renderClipboardButton(
       class={css.container}
       title={translate("clipboard.copy")}
       data-clipboard-target={`#${id} > code`}
-    >
+    ></button>
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-        <path d={path}></path>
-      </svg>
-    </button>
   )
 }

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

@@ -24,6 +24,13 @@
 // Rules
 // ----------------------------------------------------------------------------
 
+// Icon definitions
+:root {
+  --md-clipboard-icon: svg-load("@mdi/svg/svg/content-copy.svg");
+}
+
+// ----------------------------------------------------------------------------
+
 // Copy to clipboard
 .md-clipboard {
   position: absolute;
@@ -49,9 +56,15 @@
   // }
 
   // Slightly smaller icon
-  svg {
+  &::after {
+    display: block;
     width: px2em(18px);
     height: px2em(18px);
+    margin: 0 auto;
+    background-color: currentColor;
+    mask-image: var(--md-clipboard-icon);
+    mask-repeat: no-repeat;
+    content: "";
   }
 
   // Show on container hover