fix: button icons

components/http/BodyParameters.vue

@@ -8,9 +8,9 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('clear')"
+              icon="clear_all"
               @click.native="clearContent('bodyParams', $event)"
             />
-            <i class="material-icons">clear_all</i>
           </div>
         </div>
       </li>
@@ -75,27 +75,25 @@
                   : $t('turn_on')
                 : $t('turn_off'),
             }"
+            :icon="
+              param.hasOwnProperty('active')
+                ? param.active
+                  ? 'check_box'
+                  : 'check_box_outline_blank'
+                : 'check_box'
+            "
             @click.native="toggleActive(index, param)"
           />
-          <i class="material-icons">
-            {{
-              param.hasOwnProperty("active")
-                ? param.active
-                  ? "check_box"
-                  : "check_box_outline_blank"
-                : "check_box"
-            }}
-          </i>
         </li>
       </div>
       <div v-if="contentType === 'multipart/form-data'">
         <li>
           <label for="attachment" class="p-0">
             <ButtonSecondary
-              class="w-full button icon"
+              class="w-full"
+              icon="attach_file"
               @click.native="$refs.attachment[index].click()"
             />
-            <i class="material-icons">attach_file</i>
           </label>
           <input
             ref="attachment"
@@ -112,9 +110,9 @@
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('delete')"
+            icon="delete"
             @click.native="removeRequestBodyParam(index)"
           />
-          <i class="material-icons">delete</i>
         </li>
       </div>
     </ul>
@@ -122,10 +120,10 @@
       <li>
         <ButtonSecondary
           name="addrequest"
+          icon="add"
+          :label="$t('add_new')"
           @click.native="addRequestBodyParam"
         />
-        <i class="material-icons">add</i>
-        <span>{{ $t("add_new") }}</span>
       </li>
     </ul>
   </div>

components/http/CodegenModal.vue

@@ -37,9 +37,9 @@
             ref="copyRequestCode"
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('copy_code')"
+            :icon="copyIcon"
             @click.native="copyRequestCode"
           />
-          <i class="material-icons">{{ copyIcon }}</i>
         </div>
       </div>
       <SmartAceEditor

components/http/Headers.vue

@@ -8,9 +8,9 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('clear')"
+              icon="clear_all"
               @click.native="clearContent('headers', $event)"
             />
-            <i class="material-icons">clear_all</i>
           </div>
         </div>
       </li>
@@ -70,6 +70,13 @@
                   : $t('turn_on')
                 : $t('turn_off'),
             }"
+            :icon="
+              param.hasOwnProperty('active')
+                ? param.active
+                  ? 'check_box'
+                  : 'check_box_outline_blank'
+                : 'check_box'
+            "
             @click.native="
               $store.commit('setActiveHeader', {
                 index,
@@ -77,15 +84,6 @@
               })
             "
           />
-          <i class="material-icons">
-            {{
-              header.hasOwnProperty("active")
-                ? header.active
-                  ? "check_box"
-                  : "check_box_outline_blank"
-                : "check_box"
-            }}
-          </i>
         </li>
       </div>
       <div>
@@ -93,17 +91,19 @@
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('delete')"
+            icon="delete"
             @click.native="removeRequestHeader(index)"
           />
-          <i class="material-icons">delete</i>
         </li>
       </div>
     </ul>
     <ul>
       <li>
-        <ButtonSecondary @click.native="addRequestHeader" />
-        <i class="material-icons">add</i>
-        <span>{{ $t("add_new") }}</span>
+        <ButtonSecondary
+          icon="add"
+          :label="$t('add_new')"
+          @click.native="addRequestHeader"
+        />
       </li>
     </ul>
   </AppSection>

components/http/Parameters.vue

@@ -8,9 +8,9 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('clear')"
+              icon="clear_all"
               @click.native="clearContent('parameters', $event)"
             />
-            <i class="material-icons">clear_all</i>
           </div>
         </div>
       </li>
@@ -89,6 +89,13 @@
                   : $t('turn_on')
                 : $t('turn_off'),
             }"
+            :icon="
+              param.hasOwnProperty('active')
+                ? param.active
+                  ? 'check_box'
+                  : 'check_box_outline_blank'
+                : 'check_box'
+            "
             @click.native="
               $store.commit('setActiveParams', {
                 index,
@@ -96,15 +103,6 @@
               })
             "
           />
-          <i class="material-icons">
-            {{
-              param.hasOwnProperty("active")
-                ? param.active
-                  ? "check_box"
-                  : "check_box_outline_blank"
-                : "check_box"
-            }}
-          </i>
         </li>
       </div>
       <div>
@@ -112,17 +110,19 @@
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('delete')"
+            icon="delete"
             @click.native="removeRequestParam(index)"
           />
-          <i class="material-icons">delete</i>
         </li>
       </div>
     </ul>
     <ul>
       <li>
-        <ButtonSecondary @click.native="addRequestParam" />
-        <i class="material-icons">add</i>
-        <span>{{ $t("add_new") }}</span>
+        <ButtonSecondary
+          icon="add"
+          :label="$t('add_new')"
+          @click.native="addRequestParam"
+        />
       </li>
     </ul>
   </AppSection>

components/http/RawBody.vue

@@ -10,17 +10,16 @@
               ref="prettifyRequest"
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('prettify_body')"
+              :icon="prettifyIcon"
               @click.native="prettifyRequestBody"
             />
-            <i class="material-icons">{{ prettifyIcon }}</i>
-
             <label for="payload" class="p-0">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('import_json')"
+                icon="post_add"
                 @click.native="$refs.payload.click()"
               />
-              <i class="material-icons">post_add</i>
             </label>
             <input
               ref="payload"
@@ -32,9 +31,9 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('clear')"
+              icon="clear_all"
               @click.native="clearContent('rawParams', $event)"
             />
-            <i class="material-icons">clear_all</i>
           </div>
         </div>
         <div class="relative">

components/http/TokenList.vue

@@ -54,7 +54,7 @@
           </li>
         </div>
       </ul>
-      <p v-if="tokens.length === 0" class="info">
+      <p v-if="tokens.length === 0">
         {{ $t("empty") }}
       </p>
     </template>