fix: button icons

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>