Simplify icon changing JavaScript

aleksis/core/static/js/ical_urls.js

 $(".copy-button").click((e) => {
     const target = $(e.currentTarget);
     const input = $("#" + target.data("target"));
-    const icon = target.children("svg")[0];
-
-    if (!Iconify.iconExists("mdi:content-copy")) {
-        Iconify.loadIcon("mdi:content-copy");
-    }
-    const copy = Iconify.renderSVG("mdi:content-copy");
-    copy.classList.add("material-icons");
-
-    if (!Iconify.iconExists("mdi:check")) {
-        Iconify.loadIcon("mdi:check");
-    }
-    const check = Iconify.renderSVG("mdi:check");
-    check.classList.add("material-icons");
-
-    console.log(copy);
+    const copy_icon = target.children(".copy-icon-copy").first();
+    const check_icon = target.children(".copy-icon-success").first();
 
     if (navigator.clipboard) {
         console.log("Copying to clipboard");
         navigator.clipboard.writeText(input.val()).then(r => {
-            icon.replaceWith(check);
-            // target.children("svg")[0].classList.add("material-icons");
+            check_icon.show();
+            copy_icon.hide();
             setTimeout(() => {
-                target.children("svg")[0].replaceWith(copy);
-                // target.children("svg")[0].classList.add("material-icons");
+                check_icon.hide();
+                copy_icon.show();
             }, 1000);
         });
     } else {
@@ -32,10 +19,11 @@ $(".copy-button").click((e) => {
         input.select();
         document.execCommand("copy");
         input.blur();
-        icon.replaceWith(check);
-        // target.children("svg")[0].classList.add("material-icons");
+        check_icon.show();
+        copy_icon.hide();
         setTimeout(() => {
-            icon.innerHTML = copy.body;
+            check_icon.hide();
+            copy_icon.show();
         }, 1000);
     }
 });

aleksis/core/templates/core/ical/ical_list.html

@@ -27,7 +27,8 @@
           </a>
           <button type="button" data-target="input-{{ forloop.counter0 }}"
                   class="secondary-content btn-flat btn-small secondary-color-text btn-smaller-padding copy-button waves-effect waves-secondary">
-            <i class="material-icons iconify" data-icon="mdi:content-copy"></i>
+            <i class="material-icons iconify copy-icon-copy" data-icon="mdi:content-copy"></i>
+            <i class="material-icons iconify copy-icon-success" style="display: none" data-icon="mdi:check"></i>
           </button>
         </span>
         <p class="ical-description">{{ object.ical_feed_object.title }} – {{ object.ical_feed_object.description }}</p>