diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 5919d8e94..72656b70d 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -28,7 +28,7 @@
             class="icon button"
             @click="clearContent($event)"
           >
-            <i class="material-icons">clear_all</i>
+            <i class="material-icons">{{ clearIcon }}</i>
           </button>
         </div>
       </div>
@@ -118,7 +118,7 @@ export default Vue.extend({
     return {
       name: null as string | null,
       vars: [] as { key: string; value: string }[],
-      doneButton: '<i class="material-icons">done</i>',
+      clearIcon: "clear_all",
     }
   },
   watch: {
@@ -132,17 +132,13 @@ export default Vue.extend({
     },
   },
   methods: {
-    clearContent({ target }: { target: HTMLElement }) {
+    clearContent() {
       this.vars = []
-
-      target.innerHTML = this.doneButton
+      this.clearIcon = "done"
       this.$toast.info(this.$t("cleared").toString(), {
         icon: "clear_all",
       })
-      setTimeout(
-        () => (target.innerHTML = '<i class="material-icons">clear_all</i>'),
-        1000
-      )
+      setTimeout(() => (this.clearIcon = "clear_all"), 1000)
     },
     addEnvironmentVariable() {
       this.vars.push({
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index cfdb526d1..015dc9b9c 100644
--- a/components/http/CodegenModal.vue
+++ b/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)
     },
   },
 }
diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue
index c0c7a7404..072ef00fb 100644
--- a/components/http/RawBody.vue
+++ b/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",
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index d1fe9bf6e..da0046632 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -37,7 +37,7 @@
           class="icon button"
           @click="downloadResponse"
         >
-          <i class="material-icons">save_alt</i>
+          <i class="material-icons">{{ downloadIcon }}</i>
         </button>
         <button
           v-if="response.body"
@@ -46,7 +46,7 @@
           class="icon button"
           @click="copyResponse"
         >
-          <i class="material-icons">content_copy</i>
+          <i class="material-icons">{{ copyIcon }}</i>
         </button>
       </div>
     </div>
@@ -87,9 +87,8 @@ export default {
     return {
       expandResponse: false,
       responseBodyMaxLines: 16,
-      doneButton: '<i class="material-icons">done</i>',
-      downloadButton: '<i class="material-icons">save_alt</i>',
-      copyButton: '<i class="material-icons">content_copy</i>',
+      downloadIcon: "save_alt",
+      copyIcon: "content_copy",
       previewEnabled: false,
     }
   },
@@ -109,21 +108,17 @@ export default {
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
       document.body.appendChild(a)
       a.click()
-      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.downloadIcon = "done"
       this.$toast.success(this.$t("download_started"), {
         icon: "done",
       })
       setTimeout(() => {
         document.body.removeChild(a)
         window.URL.revokeObjectURL(url)
-        this.$refs.downloadResponse.innerHTML = this.downloadButton
+        this.downloadIcon = "save_alt"
       }, 1000)
     },
     copyResponse() {
-      this.$refs.copyResponse.innerHTML = this.doneButton
-      this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done",
-      })
       const aux = document.createElement("textarea")
       const copy = this.responseBodyText
       aux.innerText = copy
@@ -131,10 +126,11 @@ export default {
       aux.select()
       document.execCommand("copy")
       document.body.removeChild(aux)
-      setTimeout(
-        () => (this.$refs.copyResponse.innerHTML = this.copyButton),
-        1000
-      )
+      this.copyIcon = "done"
+      this.$toast.success(this.$t("copied_to_clipboard"), {
+        icon: "done",
+      })
+      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
     togglePreview() {
       this.previewEnabled = !this.previewEnabled
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index f5f1648a7..bb88e7ce4 100644
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -10,7 +10,7 @@
           class="icon button"
           @click="downloadResponse"
         >
-          <i class="material-icons">save_alt</i>
+          <i class="material-icons">{{ downloadIcon }}</i>
         </button>
       </div>
     </div>
@@ -28,8 +28,7 @@ export default {
   data() {
     return {
       imageSource: "",
-      doneButton: '<i class="material-icons">done</i>',
-      downloadButton: '<i class="material-icons">save_alt</i>',
+      downloadIcon: "save_alt",
     }
   },
   computed: {
@@ -81,14 +80,14 @@ export default {
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
       document.body.appendChild(a)
       a.click()
-      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.downloadIcon = "done"
       this.$toast.success(this.$t("download_started"), {
         icon: "done",
       })
       setTimeout(() => {
         document.body.removeChild(a)
         window.URL.revokeObjectURL(url)
-        this.$refs.downloadResponse.innerHTML = this.downloadButton
+        this.downloadIcon = "save_alt"
       }, 1000)
     },
   },
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index c9a67dd1b..9f446fd4e 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -25,7 +25,7 @@
           class="icon button"
           @click="downloadResponse"
         >
-          <i class="material-icons">save_alt</i>
+          <i class="material-icons">{{ downloadIcon }}</i>
         </button>
         <button
           v-if="response.body"
@@ -34,7 +34,7 @@
           class="icon button"
           @click="copyResponse"
         >
-          <i class="material-icons">content_copy</i>
+          <i class="material-icons">{{ copyIcon }}</i>
         </button>
       </div>
     </div>
@@ -71,9 +71,8 @@ export default {
     return {
       expandResponse: false,
       responseBodyMaxLines: 16,
-      doneButton: '<i class="material-icons">done</i>',
-      downloadButton: '<i class="material-icons">save_alt</i>',
-      copyButton: '<i class="material-icons">content_copy</i>',
+      downloadIcon: "save_alt",
+      copyIcon: "content_copy",
     }
   },
   computed: {
@@ -115,21 +114,17 @@ export default {
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
       document.body.appendChild(a)
       a.click()
-      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.downloadIcon = "done"
       this.$toast.success(this.$t("download_started"), {
         icon: "done",
       })
       setTimeout(() => {
         document.body.removeChild(a)
         window.URL.revokeObjectURL(url)
-        this.$refs.downloadResponse.innerHTML = this.downloadButton
+        this.downloadIcon = "save_alt"
       }, 1000)
     },
     copyResponse() {
-      this.$refs.copyResponse.innerHTML = this.doneButton
-      this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done",
-      })
       const aux = document.createElement("textarea")
       const copy = this.responseBodyText
       aux.innerText = copy
@@ -137,10 +132,11 @@ export default {
       aux.select()
       document.execCommand("copy")
       document.body.removeChild(aux)
-      setTimeout(
-        () => (this.$refs.copyResponse.innerHTML = this.copyButton),
-        1000
-      )
+      this.copyIcon = "done"
+      this.$toast.success(this.$t("copied_to_clipboard"), {
+        icon: "done",
+      })
+      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
   },
 }
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index 73a30fb99..77dd8d5ba 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -25,7 +25,7 @@
           class="icon button"
           @click="downloadResponse"
         >
-          <i class="material-icons">save_alt</i>
+          <i class="material-icons">{{ downloadIcon }}</i>
         </button>
         <button
           v-if="response.body"
@@ -34,7 +34,7 @@
           class="icon button"
           @click="copyResponse"
         >
-          <i class="material-icons">content_copy</i>
+          <i class="material-icons">{{ copyIcon }}</i>
         </button>
       </div>
     </div>
@@ -70,9 +70,8 @@ export default {
     return {
       expandResponse: false,
       responseBodyMaxLines: 16,
-      doneButton: '<i class="material-icons">done</i>',
-      downloadButton: '<i class="material-icons">save_alt</i>',
-      copyButton: '<i class="material-icons">content_copy</i>',
+      downloadIcon: "save_alt",
+      copyIcon: "content_copy",
     }
   },
   computed: {
@@ -106,21 +105,17 @@ export default {
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
       document.body.appendChild(a)
       a.click()
-      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.downloadIcon = "done"
       this.$toast.success(this.$t("download_started"), {
         icon: "done",
       })
       setTimeout(() => {
         document.body.removeChild(a)
         window.URL.revokeObjectURL(url)
-        this.$refs.downloadResponse.innerHTML = this.downloadButton
+        this.downloadIcon = "save_alt"
       }, 1000)
     },
     copyResponse() {
-      this.$refs.copyResponse.innerHTML = this.doneButton
-      this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done",
-      })
       const aux = document.createElement("textarea")
       const copy = this.responseBodyText
       aux.innerText = copy
@@ -128,10 +123,11 @@ export default {
       aux.select()
       document.execCommand("copy")
       document.body.removeChild(aux)
-      setTimeout(
-        () => (this.$refs.copyResponse.innerHTML = this.copyButton),
-        1000
-      )
+      this.copyIcon = "done"
+      this.$toast.success(this.$t("copied_to_clipboard"), {
+        icon: "done",
+      })
+      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
   },
 }
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index 68e08532f..861d81f0d 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -25,7 +25,7 @@
           class="icon button"
           @click="downloadResponse"
         >
-          <i class="material-icons">save_alt</i>
+          <i class="material-icons">{{ downloadIcon }}</i>
         </button>
         <button
           v-if="response.body"
@@ -34,7 +34,7 @@
           class="icon button"
           @click="copyResponse"
         >
-          <i class="material-icons">content_copy</i>
+          <i class="material-icons">{{ copyIcon }}</i>
         </button>
       </div>
     </div>
@@ -69,9 +69,8 @@ export default {
     return {
       expandResponse: false,
       responseBodyMaxLines: 16,
-      doneButton: '<i class="material-icons">done</i>',
-      downloadButton: '<i class="material-icons">save_alt</i>',
-      copyButton: '<i class="material-icons">content_copy</i>',
+      copyIcon: "content_copy",
+      downloadIcon: "save_alt",
     }
   },
   computed: {
@@ -97,21 +96,17 @@ export default {
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
       document.body.appendChild(a)
       a.click()
-      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.downloadIcon = "done"
       this.$toast.success(this.$t("download_started"), {
         icon: "done",
       })
       setTimeout(() => {
         document.body.removeChild(a)
         window.URL.revokeObjectURL(url)
-        this.$refs.downloadResponse.innerHTML = this.downloadButton
+        this.downloadIcon = "save_alt"
       }, 1000)
     },
     copyResponse() {
-      this.$refs.copyResponse.innerHTML = this.doneButton
-      this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done",
-      })
       const aux = document.createElement("textarea")
       const copy = this.responseBodyText
       aux.innerText = copy
@@ -119,10 +114,11 @@ export default {
       aux.select()
       document.execCommand("copy")
       document.body.removeChild(aux)
-      setTimeout(
-        () => (this.$refs.copyResponse.innerHTML = this.copyButton),
-        1000
-      )
+      this.copyIcon = "done"
+      this.$toast.success(this.$t("copied_to_clipboard"), {
+        icon: "done",
+      })
+      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
   },
 }
diff --git a/pages/graphql.vue b/pages/graphql.vue
index e59a058f7..e920a8715 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -179,7 +179,7 @@
                 class="icon button"
                 @click="downloadSchema"
               >
-                <i class="material-icons">save_alt</i>
+                <i class="material-icons">{{ downloadSchemaIcon }}</i>
               </button>
               <button
                 ref="copySchemaCode"
@@ -187,7 +187,7 @@
                 class="icon button"
                 @click="copySchema"
               >
-                <i class="material-icons">content_copy</i>
+                <i class="material-icons">{{ copySchemaIcon }}</i>
               </button>
             </div>
           </div>
@@ -236,14 +236,14 @@
                 class="icon button"
                 @click="copyQuery"
               >
-                <i class="material-icons">content_copy</i>
+                <i class="material-icons">{{ copyQueryIcon }}</i>
               </button>
               <button
                 v-tooltip="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
                 class="icon button"
                 @click="doPrettifyQuery"
               >
-                <i class="material-icons">photo_filter</i>
+                <i class="material-icons">{{ prettifyIcon }}</i>
               </button>
               <button
                 ref="saveRequest"
@@ -304,7 +304,7 @@
                   class="icon button"
                   @click="downloadResponse"
                 >
-                  <i class="material-icons">save_alt</i>
+                  <i class="material-icons">{{ downloadResponseIcon }}</i>
                 </button>
                 <button
                   v-if="response"
@@ -313,7 +313,7 @@
                   class="icon button"
                   @click="copyResponse"
                 >
-                  <i class="material-icons">content_copy</i>
+                  <i class="material-icons">{{ copyResponseIcon }}</i>
                 </button>
               </div>
             </div>
@@ -503,9 +503,12 @@ export default {
       mutationFields: [],
       subscriptionFields: [],
       graphqlTypes: [],
-      copyButton: '<i class="material-icons">content_copy</i>',
-      downloadButton: '<i class="material-icons">save_alt</i>',
-      doneButton: '<i class="material-icons">done</i>',
+      downloadResponseIcon: "save_alt",
+      downloadSchemaIcon: "save_alt",
+      copyQueryIcon: "content_copy",
+      copySchemaIcon: "content_copy",
+      copyResponseIcon: "content_copy",
+      prettifyIcon: "photo_filter",
       expandResponse: false,
       responseBodyMaxLines: 16,
       graphqlFieldsFilterText: undefined,
@@ -711,6 +714,8 @@ export default {
     getSpecialKey: getPlatformSpecialKey,
     doPrettifyQuery() {
       this.$refs.queryEditor.prettifyQuery()
+      this.prettifyIcon = "done"
+      setTimeout(() => (this.prettifyIcon = "photo_filter"), 1000)
     },
     async handleJumpToType(type) {
       this.$refs.gqlTabs.selectTab(this.$refs.typesTab)
@@ -731,41 +736,23 @@ export default {
       return t
     },
     copySchema() {
-      this.$refs.copySchemaCode.innerHTML = this.doneButton
-      const aux = document.createElement("textarea")
-      aux.innerText = this.schema
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
-      this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done",
-      })
-      setTimeout(
-        () => (this.$refs.copySchemaCode.innerHTML = this.copyButton),
-        1000
-      )
+      this.copyToClipboard(this.schema)
+      this.copySchemaIcon = "done"
+      setTimeout(() => (this.copySchemaIcon = "content_copy"), 1000)
     },
     copyQuery() {
-      this.$refs.copyQueryButton.innerHTML = this.doneButton
-      const aux = document.createElement("textarea")
-      aux.innerText = this.gqlQueryString
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
-      this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done",
-      })
-      setTimeout(
-        () => (this.$refs.copyQueryButton.innerHTML = this.copyButton),
-        1000
-      )
+      this.copyToClipboard(this.gqlQueryString)
+      this.copyQueryIcon = "done"
+      setTimeout(() => (this.copyQueryIcon = "content_copy"), 1000)
     },
     copyResponse() {
-      this.$refs.copyResponseButton.innerHTML = this.doneButton
+      this.copyToClipboard(this.response)
+      this.copyResponseIcon = "done"
+      setTimeout(() => (this.copyResponseIcon = "content_copy"), 1000)
+    },
+    copyToClipboard(content) {
       const aux = document.createElement("textarea")
-      aux.innerText = this.response
+      aux.innerText = content
       document.body.appendChild(aux)
       aux.select()
       document.execCommand("copy")
@@ -773,10 +760,6 @@ export default {
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",
       })
-      setTimeout(
-        () => (this.$refs.copyResponseButton.innerHTML = this.copyButton),
-        1000
-      )
     },
     async runQuery() {
       const startTime = Date.now()
@@ -1093,14 +1076,14 @@ export default {
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
       document.body.appendChild(a)
       a.click()
-      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.downloadResponseIcon = "done"
       this.$toast.success(this.$t("download_started"), {
         icon: "done",
       })
       setTimeout(() => {
         document.body.removeChild(a)
         window.URL.revokeObjectURL(url)
-        this.$refs.downloadResponse.innerHTML = this.downloadButton
+        this.downloadResponseIcon = "save_alt"
       }, 1000)
     },
     downloadSchema() {
@@ -1112,14 +1095,14 @@ export default {
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
       document.body.appendChild(a)
       a.click()
-      this.$refs.downloadSchema.innerHTML = this.doneButton
+      this.downloadSchemaIcon = "done"
       this.$toast.success(this.$t("download_started"), {
         icon: "done",
       })
       setTimeout(() => {
         document.body.removeChild(a)
         window.URL.revokeObjectURL(url)
-        this.$refs.downloadSchema.innerHTML = this.downloadButton
+        this.downloadSchemaIcon = "save_alt"
       }, 1000)
     },
     addRequestHeader() {
diff --git a/pages/settings.vue b/pages/settings.vue
index b13943d25..436e8f46d 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -136,7 +136,7 @@
             class="icon button"
             @click="resetProxy"
           >
-            <i class="material-icons">clear_all</i>
+            <i class="material-icons">{{ clearIcon }}</i>
           </button>
         </div>
         <input
@@ -227,7 +227,7 @@ export default Vue.extend({
         ? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
         : null,
 
-      doneButton: '<i class="material-icons">done</i>',
+      clearIcon: "clear_all",
 
       SYNC_COLLECTIONS: true,
       SYNC_ENVIRONMENTS: true,
@@ -309,17 +309,13 @@ export default Vue.extend({
     ) {
       this.applySetting(name, value)
     },
-    resetProxy({ target }: { target: HTMLElement }) {
+    resetProxy() {
       applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
-
-      target.innerHTML = this.doneButton
+      this.clearIcon = "done"
       this.$toast.info(this.$t("cleared"), {
         icon: "clear_all",
       })
-      setTimeout(
-        () => (target.innerHTML = '<i class="material-icons">clear_all</i>'),
-        1000
-      )
+      setTimeout(() => (this.clearIcon = "clear_all"), 1000)
     },
   },
 })