refactor: better icon button states

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",