refactor: better icon button states

components/http/CodegenModal.vue

@@ -48,7 +48,7 @@
             class="icon button"
             @click="copyRequestCode"
           >
-            <i class="material-icons">content_copy</i>
+            <i class="material-icons">{{ copyIcon }}</i>
           </button>
         </div>
       </div>
@@ -84,8 +84,7 @@ export default {
   data() {
     return {
       codegens,
-      copyButton: '<i class="material-icons">content_copy</i>',
-      doneButton: '<i class="material-icons">done</i>',
+      copyIcon: "content_copy",
     }
   },
   computed: {
@@ -106,17 +105,14 @@ export default {
       this.$emit("handle-import")
     },
     copyRequestCode() {
-      this.$refs.copyRequestCode.innerHTML = this.doneButton
-      this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done",
-      })
       this.$refs.generatedCode.editor.selectAll()
       this.$refs.generatedCode.editor.focus()
       document.execCommand("copy")
-      setTimeout(
-        () => (this.$refs.copyRequestCode.innerHTML = this.copyButton),
-        1000
-      )
+      this.copyIcon = "done"
+      this.$toast.success(this.$t("copied_to_clipboard"), {
+        icon: "done",
+      })
+      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
   },
 }

components/http/RawBody.vue

@@ -12,7 +12,7 @@
               class="icon button"
               @click="prettifyRequestBody"
             >
-              <i class="material-icons">photo_filter</i>
+              <i class="material-icons">{{ prettifyIcon }}</i>
             </button>
             <label for="payload" class="p-0">
               <button
@@ -69,7 +69,7 @@ export default {
   },
   data() {
     return {
-      doneButton: '<i class="material-icons">done</i>',
+      prettifyIcon: "photo_filter",
     }
   },
   computed: {
@@ -112,9 +112,8 @@ export default {
       try {
         const jsonObj = JSON.parse(this.rawParamsBody)
         this.rawParamsBody = JSON.stringify(jsonObj, null, 2)
-        const oldIcon = this.$refs.prettifyRequest.innerHTML
-        this.$refs.prettifyRequest.innerHTML = this.doneButton
-        setTimeout(() => (this.$refs.prettifyRequest.innerHTML = oldIcon), 1000)
+        this.prettifyIcon = "done"
+        setTimeout(() => (this.prettifyIcon = "photo_filter"), 1000)
       } catch (e) {
         this.$toast.error(`${this.$t("json_prettify_invalid_body")}`, {
           icon: "error",