fix: button icons

2021-07-05 12:56:00 +00:00
parent 069b26bdc4
commit fde5b0717d
52 changed files with 463 additions and 759 deletions
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -139,69 +139,6 @@ export default {
        ],
      })
    }
-
-    // const showAd = localStorage.getItem("showAd") === "no"
-    // if (!showAd) {
-    //   setTimeout(() => {
-    //     this.$toast.clear()
-    //     this.$toast.show(
-    //       "<span><a href='https://fundoss.org/collective/hoppscotch' target='_blank' rel='noopener'>Sponsor us to support Hoppscotch open source project 💖</a><br><sub>Whoosh this away to dismiss.</sub></span>",
-    //       {
-    //         icon: "",
-    //         duration: 0,
-    //         theme: "toasted-ad",
-    //         action: [
-    //           {
-    //             text: "Donate",
-    //             icon: "chevron_right",
-    //             onClick: (_, toastObject) => {
-    //               localStorage.setItem("showAd", "no")
-    //               toastObject.goAway(0)
-    //               window.open("https://fundoss.org/collective/hoppscotch")
-    //             },
-    //           },
-    //         ],
-    //         onComplete() {
-    //           localStorage.setItem("showAd", "no")
-    //         },
-    //       }
-    //     )
-    //   }, 6000)
-    // }
-
-    // let showExtensionsToast = localStorage.getItem("showExtensionsToast") === "yes"
-    // if (!showExtensionsToast) {
-    //   setTimeout(() => {
-    //     if (!hasExtensionInstalled()) {
-    //       this.$toast.show(this.$t("extensions_info2"), {
-    //         icon: "extension",
-    //         duration: 5000,
-    //         theme: "toasted-primary",
-    //         action: [
-    //           {
-    //             text: this.$t("yes"),
-    //             onClick: (_, toastObject) => {
-    //               this.showExtensions = true
-    //               localStorage.setItem("showExtensionsToast", "yes")
-    //               toastObject.goAway(0)
-    //             },
-    //           },
-    //           {
-    //             text: this.$t("no"),
-    //             onClick: (_, toastObject) => {
-    //               this.$store.commit("setMiscState", {
-    //                 value: false,
-    //                 attribute: "showExtensionsToast",
-    //               })
-    //               localStorage.setItem("showExtensionsToast", "no")
-    //               toastObject.goAway(0)
-    //             },
-    //           },
-    //         ],
-    //       })
-    //     }
-    //   }, 5000)
-    // }
  },
  methods: {
    nativeShare() {
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -9,58 +9,60 @@
      @dragleave="dragging = false"
      @dragend="dragging = false"
    >
-      <ButtonSecondary @click.native="toggleShowChildren" />
+      <ButtonSecondary
+        :label="collection.name"
+        @click.native="toggleShowChildren"
+      />
      <i v-show="!showChildren && !isFiltered" class="material-icons"
        >arrow_right</i
      >
      <i v-show="showChildren || isFiltered" class="material-icons"
        >arrow_drop_down</i
      >
-
      <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
        >check_circle</i
      >
-
      <i v-else class="material-icons">folder</i>
-      <span>{{ collection.name }}</span>
-
      <div>
        <ButtonSecondary
          v-if="doc"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('import')"
+          icon="topic"
          @click.native="$emit('select-collection')"
        />
-        <i class="material-icons">topic</i>
-
        <tippy tabindex="-1" trigger="click" theme="popover" arrow>
          <template #trigger>
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('more')"
+              icon="more_vert"
            />
-            <i class="material-icons">more_vert</i>
          </template>
          <div>
            <ButtonSecondary
+              icon="create_new_folder"
+              :label="$t('new_folder')"
              @click.native="
                $emit('add-folder', {
                  path: `${collectionIndex}`,
                })
              "
            />
-            <i class="material-icons">create_new_folder</i>
-            <span>{{ $t("new_folder") }}</span>
          </div>
          <div>
-            <ButtonSecondary @click.native="$emit('edit-collection')" />
-            <i class="material-icons">create</i>
-            <span>{{ $t("edit") }}</span>
+            <ButtonSecondary
+              icon="create"
+              label="$t('edit')"
+              @click.native="$emit('edit-collection')"
+            />
          </div>
          <div>
-            <ButtonSecondary @click.native="confirmRemove = true" />
-            <i class="material-icons">delete</i>
-            <span>{{ $t("delete") }}</span>
+            <ButtonSecondary
+              icon="delete"
+              :label="$t('delete')"
+              @click.native="confirmRemove = true"
+            />
          </div>
        </tippy>
      </div>
@@ -116,7 +118,7 @@
          "
          class="flex ml-8 border-l border-divider"
        >
-          <p class="info">
+          <p>
            <i class="material-icons">not_interested</i>
            {{ $t("collection_empty") }}
          </p>
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -20,33 +20,37 @@
        <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
          >check_circle</i
        >
-
        <i v-else class="material-icons">folder_open</i>
        <span>{{ folder.name }}</span>
      </div>
      <tippy tabindex="-1" trigger="click" theme="popover" arrow>
        <template #trigger>
-          <ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
-          <i class="material-icons">more_vert</i>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            icon="more_vert"
+          />
        </template>
        <div>
          <ButtonSecondary
+            icon="create_new_folder"
+            :label="$t('new_folder')"
            @click.native="$emit('add-folder', { folder, path: folderPath })"
          />
-          <i class="material-icons">create_new_folder</i>
-          <span>{{ $t("new_folder") }}</span>
        </div>
        <div>
          <ButtonSecondary
+            icon="edit"
+            :labeel="$t('edit')"
            @click.native="$emit('edit-folder', { folder, folderPath })"
          />
-          <i class="material-icons">edit</i>
-          <span>{{ $t("edit") }}</span>
        </div>
        <div>
-          <ButtonSecondary @click.native="confirmRemove = true" />
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
+          <ButtonSecondary
+            icon="delete"
+            :label="$t('delete')"
+            @click.native="confirmRemove = true"
+          />
        </div>
      </tippy>
    </div>
@@ -103,7 +107,7 @@
        "
      >
        <li class="flex ml-8 border-l border-divider">
-          <p class="info">
+          <p>
            <i class="material-icons">not_interested</i>
            {{ $t("folder_empty") }}
          </p>
--- a/components/collections/graphql/ImportExport.vue
+++ b/components/collections/graphql/ImportExport.vue
@@ -8,8 +8,8 @@
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('more')"
+              icon="more_vert"
            />
-            <i class="material-icons">more_vert</i>
          </template>
          <div>
            <ButtonSecondary
@@ -36,10 +36,10 @@
                  ? true
                  : false
              "
+              icon="assignment_turned_in"
+              :label="$t('create_secret_gist')"
              @click.native="createCollectionGist"
            />
-            <i class="material-icons">assignment_turned_in</i>
-            <span>{{ $t("create_secret_gist") }}</span>
          </div>
        </tippy>
        <ButtonSecondary icon="close" @click.native="hideModal" />
@@ -50,10 +50,10 @@
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('replace_current')"
+          icon="folder_special"
+          :label="$t('replace_json')"
          @click.native="openDialogChooseFileToReplaceWith"
        />
-        <i class="material-icons">folder_special</i>
-        <span>{{ $t("replace_json") }}</span>
        <input
          ref="inputChooseFileToReplaceWith"
          class="input"
@@ -65,10 +65,10 @@
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('preserve_current')"
+          icon="create_new_folder"
+          :label="$t('import_json')"
          @click.native="openDialogChooseFileToImportFrom"
        />
-        <i class="material-icons">create_new_folder</i>
-        <span>{{ $t("import_json") }}</span>
        <input
          ref="inputChooseFileToImportFrom"
          class="input"
@@ -80,12 +80,10 @@
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('download_file')"
+          icon="drive_file_move"
+          :label="$t('export_as_json')"
          @click.native="exportJSON"
        />
-        <i class="material-icons">drive_file_move</i>
-        <span>
-          {{ $t("export_as_json") }}
-        </span>
      </div>
    </template>
  </SmartModal>
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -28,6 +28,8 @@
        </template>
        <div>
          <ButtonSecondary
+            icon="edit"
+            :label="$t('edit')"
            @click.native="
              $emit('edit-request', {
                request,
@@ -36,13 +38,13 @@
              })
            "
          />
-          <i class="material-icons">edit</i>
-          <span>{{ $t("edit") }}</span>
        </div>
        <div>
-          <ButtonSecondary @click.native="confirmRemove = true" />
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
+          <ButtonSecondary
+            icon="delete"
+            :label="$t('delete')"
+            @click.native="confirmRemove = true"
+          />
        </div>
      </tippy>
    </div>
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -46,17 +46,18 @@
      @hide-modal="displayModalImportExport(false)"
    />
    <div class="border-b row-wrapper border-divider">
-      <ButtonSecondary @click.native="displayModalAdd(true)" />
-      <i class="material-icons">add</i>
-      <span>{{ $t("new") }}</span>
-
+      <ButtonSecondary
+        icon="new"
+        :label="$t('new')"
+        @click.native="displayModalAdd(true)"
+      />
      <ButtonSecondary
        v-if="showCollActions"
+        :label="$t('import_export')"
        @click.native="displayModalImportExport(true)"
      />
-      {{ $t("import_export") }}
    </div>
-    <p v-if="collections.length === 0" class="info">
+    <p v-if="collections.length === 0">
      <i class="material-icons">help_outline</i>
      {{ $t("create_new_collection") }}
    </p>
@@ -84,7 +85,7 @@
        </li>
      </ul>
    </div>
-    <p v-if="filterText && filteredCollections.length === 0" class="info">
+    <p v-if="filterText && filteredCollections.length === 0">
      <i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{
        filterText
      }}"
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -83,7 +83,7 @@
        @click.native="displayModalImportExport(true)"
      />
    </div>
-    <p v-if="collections.length === 0" class="info">
+    <p v-if="collections.length === 0">
      <i class="material-icons">help_outline</i>
      {{ $t("create_new_collection") }}
    </p>
@@ -123,10 +123,9 @@
        </li>
      </ul>
    </div>
-    <p v-if="filterText && filteredCollections.length === 0" class="info">
-      <i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{
-        filterText
-      }}"
+    <p v-if="filterText && filteredCollections.length === 0">
+      <i class="material-icons">not_interested</i>
+      {{ $t("nothing_found") }} "{{ filterText }}"
    </p>
  </AppSection>
 </template>
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -9,47 +9,47 @@
      @dragleave="dragging = false"
      @dragend="dragging = false"
    >
-      <ButtonSecondary @click.native="toggleShowChildren" />
+      <ButtonSecondary
+        :label="collection.name"
+        @click.native="toggleShowChildren"
+      />
      <i v-show="!showChildren && !isFiltered" class="material-icons"
        >arrow_right</i
      >
      <i v-show="showChildren || isFiltered" class="material-icons"
        >arrow_drop_down</i
      >
-
      <i v-if="isSelected" class="text-green-400 material-icons"
        >check_circle</i
      >
-
      <i v-else class="material-icons">folder</i>
-      <span>{{ collection.name }}</span>
-
      <div>
        <ButtonSecondary
          v-if="doc && !selected"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('import')"
+          icon="check_box_outline_blank"
          @click.native="$emit('select-collection')"
        />
-        <i class="material-icons">check_box_outline_blank</i>
        <ButtonSecondary
          v-if="doc && selected"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('delete')"
+          icon="check_box"
          @click.native="$emit('unselect-collection')"
        />
-        <i class="material-icons">check_box</i>
-
        <tippy tabindex="-1" trigger="click" theme="popover" arrow>
          <template #trigger>
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('more')"
+              icon="more_vert"
            />
-            <i class="material-icons">more_vert</i>
          </template>
          <div>
            <ButtonSecondary
+              icon="create_new_folder"
+              :label="$t('new_folder')"
              @click.native="
                $emit('add-folder', {
                  folder: collection,
@@ -57,18 +57,20 @@
                })
              "
            />
-            <i class="material-icons">create_new_folder</i>
-            <span>{{ $t("new_folder") }}</span>
          </div>
          <div>
-            <ButtonSecondary @click.native="$emit('edit-collection')" />
-            <i class="material-icons">create</i>
-            <span>{{ $t("edit") }}</span>
+            <ButtonSecondary
+              icon="create"
+              :label="$t('edit')"
+              @click.native="$emit('edit-collection')"
+            />
          </div>
          <div>
-            <ButtonSecondary @click.native="confirmRemove = true" />
-            <i class="material-icons">delete</i>
-            <span>{{ $t("delete") }}</span>
+            <ButtonSecondary
+              icon="delete"
+              :label="$t('delete')"
+              @click.native="confirmRemove = true"
+            />
          </div>
        </tippy>
      </div>
@@ -131,7 +133,7 @@
          "
          class="flex ml-8 border-l border-divider"
        >
-          <p class="info">
+          <p>
            <i class="material-icons">not_interested</i>
            {{ $t("collection_empty") }}
          </p>
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -10,7 +10,10 @@
      @dragend="dragging = false"
    >
      <div>
-        <ButtonSecondary @click.native="toggleShowChildren" />
+        <ButtonSecondary
+          :label="folder.name ? folder.name : folder.title"
+          @click.native="toggleShowChildren"
+        />
        <i v-show="!showChildren && !isFiltered" class="material-icons"
          >arrow_right</i
        >
@@ -21,22 +24,26 @@
          >check_circle</i
        >
        <i v-else class="material-icons">folder_open</i>
-        <span>{{ folder.name ? folder.name : folder.title }}</span>
      </div>
      <tippy tabindex="-1" trigger="click" theme="popover" arrow>
        <template #trigger>
-          <ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
-          <i class="material-icons">more_vert</i>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            icon="more_vert"
+          />
        </template>
        <div>
          <ButtonSecondary
+            icon="create_new_folder"
+            :label="$t('new_folder')"
            @click.native="$emit('add-folder', { folder, path: folderPath })"
          />
-          <i class="material-icons">create_new_folder</i>
-          <span>{{ $t("new_folder") }}</span>
        </div>
        <div>
          <ButtonSecondary
+            icon="edit"
+            :label="$t('edit')"
            @click.native="
              $emit('edit-folder', {
                folder,
@@ -46,13 +53,13 @@
              })
            "
          />
-          <i class="material-icons">edit</i>
-          <span>{{ $t("edit") }}</span>
        </div>
        <div>
-          <ButtonSecondary @click.native="confirmRemove = true" />
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
+          <ButtonSecondary
+            icon="delete"
+            :labl="$t('delete')"
+            @click.native="confirmRemove = true"
+          />
        </div>
      </tippy>
    </div>
@@ -113,7 +120,7 @@
        "
      >
        <li class="flex ml-8 border-l border-divider">
-          <p class="info">
+          <p>
            <i class="material-icons">not_interested</i>
            {{ $t("folder_empty") }}
          </p>
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -23,11 +23,16 @@
      </div>
      <tippy tabindex="-1" trigger="click" theme="popover" arrow>
        <template #trigger>
-          <ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
-          <i class="material-icons">more_vert</i>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            icon="more_vert"
+          />
        </template>
        <div>
          <ButtonSecondary
+            icon="edit"
+            :label="$t('edit')"
            @click.native="
              $emit('edit-request', {
                collectionIndex,
@@ -39,13 +44,13 @@
              })
            "
          />
-          <i class="material-icons">edit</i>
-          <span>{{ $t("edit") }}</span>
        </div>
        <div>
-          <ButtonSecondary @click.native="confirmRemove = true" />
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
+          <ButtonSecondary
+            icon="delete"
+            :label="$t('delete')"
+            @click.native="confirmRemove = true"
+          />
        </div>
      </tippy>
    </div>
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -1,49 +1,49 @@
 <template>
  <div>
    <div>
-      <ButtonSecondary @click.native="toggleShowChildren" />
+      <ButtonSecondary
+        :label="collection.title"
+        @click.native="toggleShowChildren"
+      />
      <i v-show="!showChildren && !isFiltered" class="material-icons"
        >arrow_right</i
      >
      <i v-show="showChildren || isFiltered" class="material-icons"
        >arrow_drop_down</i
      >
-
      <i v-if="isSelected" class="text-green-400 material-icons"
        >check_circle</i
      >
-
      <i v-else class="material-icons">folder</i>
-      <span>{{ collection.title }}</span>
-
      <div>
        <ButtonSecondary
          v-if="doc && !selected"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('import')"
+          icon="check_box_outline_blank"
          @click.native="$emit('select-collection')"
        />
-        <i class="material-icons">check_box_outline_blank</i>
        <ButtonSecondary
          v-if="doc && selected"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('delete')"
+          icon="check_box"
          @click.native="$emit('unselect-collection')"
        />
-        <i class="material-icons">check_box</i>
-
        <tippy tabindex="-1" trigger="click" theme="popover" arrow>
          <template #trigger>
            <ButtonSecondary
              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('more')"
+              icon="more_vert"
            />
-            <i class="material-icons">more_vert</i>
          </template>
          <div>
            <ButtonSecondary
              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              icon="create_new_folder"
+              :label="$t('new_folder')"
              @click.native="
                $emit('add-folder', {
                  folder: collection,
@@ -51,24 +51,22 @@
                })
              "
            />
-            <i class="material-icons">create_new_folder</i>
-            <span>{{ $t("new_folder") }}</span>
          </div>
          <div>
            <ButtonSecondary
              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              icon="create"
+              :label="$t('edit')"
              @click.native="$emit('edit-collection')"
            />
-            <i class="material-icons">create</i>
-            <span>{{ $t("edit") }}</span>
          </div>
          <div>
            <ButtonSecondary
              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              icon="delete"
+              :label="$t('delete')"
              @click.native="confirmRemove = true"
            />
-            <i class="material-icons">delete</i>
-            <span>{{ $t("delete") }}</span>
          </div>
        </tippy>
      </div>
@@ -131,7 +129,7 @@
          "
          class="flex ml-8 border-l border-divider"
        >
-          <p class="info">
+          <p>
            <i class="material-icons">not_interested</i>
            {{ $t("collection_empty") }}
          </p>
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -2,20 +2,20 @@
  <div>
    <div>
      <div>
-        <ButtonSecondary @click.native="toggleShowChildren" />
+        <ButtonSecondary
+          :label="folder.name ? folder.name : folder.title"
+          @click.native="toggleShowChildren"
+        />
        <i v-show="!showChildren && !isFiltered" class="material-icons"
          >arrow_right</i
        >
        <i v-show="showChildren || isFiltered" class="material-icons"
          >arrow_drop_down</i
        >
-
        <i v-if="isSelected" class="text-green-400 material-icons"
          >check_circle</i
        >
-
        <i v-else class="material-icons">folder_open</i>
-        <span>{{ folder.name ? folder.name : folder.title }}</span>
      </div>
      <tippy tabindex="-1" trigger="click" theme="popover" arrow>
        <template #trigger>
@@ -23,20 +23,22 @@
            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
            v-tippy="{ theme: 'tooltip' }"
            :title="$t('more')"
+            icon="more_vert"
          />
-          <i class="material-icons">more_vert</i>
        </template>
        <div>
          <ButtonSecondary
            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            icon="create_new_folder"
+            :label="$t('new_folder')"
            @click.native="$emit('add-folder', { folder, path: folderPath })"
          />
-          <i class="material-icons">create_new_folder</i>
-          <span>{{ $t("new_folder") }}</span>
        </div>
        <div>
          <ButtonSecondary
            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            icon="edit"
+            :label="$t('edit')"
            @click.native="
              $emit('edit-folder', {
                folder,
@@ -46,16 +48,14 @@
              })
            "
          />
-          <i class="material-icons">edit</i>
-          <span>{{ $t("edit") }}</span>
        </div>
        <div>
          <ButtonSecondary
            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            icon="delete"
+            :label="$t('delete')"
            @click.native="confirmRemove = true"
          />
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
        </div>
      </tippy>
    </div>
@@ -114,7 +114,7 @@
        "
      >
        <li class="flex ml-8 border-l border-divider">
-          <p class="info">
+          <p>
            <i class="material-icons">not_interested</i>
            {{ $t("folder_empty") }}
          </p>
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -5,16 +5,15 @@
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="!doc ? $t('use_request') : ''"
+          :label="request.name"
          @click.native="!doc ? selectRequest() : {}"
        />
        <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
          >check_circle</i
        >
-
        <span v-else :class="getRequestLabelColor(request.method)">{{
          request.method
        }}</span>
-        <span>{{ request.name }}</span>
      </div>
      <tippy tabindex="-1" trigger="click" theme="popover" arrow>
        <template #trigger>
@@ -22,11 +21,13 @@
            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
            v-tippy="{ theme: 'tooltip' }"
            :title="$t('more')"
+            icon="more_vert"
          />
-          <i class="material-icons">more_vert</i>
        </template>
        <div>
          <ButtonSecondary
+            icon="edit"
+            :label="$t('edit')"
            @click.native="
              $emit('edit-request', {
                collectionIndex,
@@ -37,13 +38,13 @@
              })
            "
          />
-          <i class="material-icons">edit</i>
-          <span>{{ $t("edit") }}</span>
        </div>
        <div>
-          <ButtonSecondary @click.native="confirmRemove = true" />
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
+          <ButtonSecondary
+            icon="delete"
+            :label="$t('delete')"
+            @click.native="confirmRemove = true"
+          />
        </div>
      </tippy>
    </div>
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -62,17 +62,19 @@
              id="variable"
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('delete')"
+              icon="delete"
              @click.native="removeEnvironmentVariable(index)"
            />
-            <i class="material-icons">delete</i>
          </li>
        </div>
      </ul>
      <ul>
        <li>
-          <ButtonSecondary @click.native="addEnvironmentVariable" />
-          <i class="material-icons">add</i>
-          <span>{{ $t("add_new") }}</span>
+          <ButtonSecondary
+            icon="add"
+            :label="$t('add_new')"
+            @click.native="addEnvironmentVariable"
+          />
        </li>
      </ul>
    </template>
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -2,24 +2,33 @@
  <div>
    <div class="row-wrapper">
      <div>
-        <ButtonSecondary @click.native="$emit('edit-environment')" />
-        <i class="material-icons">layers</i>
-        <span>{{ environment.name }}</span>
+        <ButtonSecondary
+          icon="layers"
+          :label="environment.name"
+          @click.native="$emit('edit-environment')"
+        />
      </div>
      <tippy tabindex="-1" trigger="click" theme="popover" arrow>
        <template #trigger>
-          <ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
-          <i class="material-icons">more_vert</i>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            icon="more_vert"
+          />
        </template>
        <div>
-          <ButtonSecondary @click.native="$emit('edit-environment')" />
-          <i class="material-icons">create</i>
-          <span>{{ $t("edit") }}</span>
+          <ButtonSecondary
+            icon="create"
+            :label="$t('edit')"
+            @click.native="$emit('edit-environment')"
+          />
        </div>
        <div>
-          <ButtonSecondary @click.native="confirmRemove = true" />
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
+          <ButtonSecondary
+            icon="delete"
+            :label="$t('delete')"
+            @click.native="confirmRemove = true"
+          />
        </div>
      </tippy>
    </div>
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -10,13 +10,15 @@
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('more')"
+              icon="more_vert"
            />
-            <i class="material-icons">more_vert</i>
          </template>
          <div>
-            <ButtonSecondary @click.native="readEnvironmentGist" />
-            <i class="material-icons">assignment_returned</i>
-            <span>{{ $t("import_from_gist") }}</span>
+            <ButtonSecondary
+              icon="assignment_returned"
+              :label="$t('import_from_gist')"
+              @click.native="readEnvironmentGist"
+            />
          </div>
          <div
            v-tippy="{ theme: 'tooltip' }"
@@ -36,10 +38,10 @@
                  ? true
                  : false
              "
+              icon="assignment_turned_in"
+              :label="$t('create_secret_gist')"
              @click.native="createEnvironmentGist"
            />
-            <i class="material-icons">assignment_turned_in</i>
-            <span>{{ $t("create_secret_gist") }}</span>
          </div>
        </tippy>
        <ButtonSecondary icon="close" @click.native="hideModal" />
@@ -50,10 +52,10 @@
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('replace_current')"
+          icon="folder_special"
+          :label="$t('replace_json')"
          @click.native="openDialogChooseFileToReplaceWith"
        />
-        <i class="material-icons">folder_special</i>
-        <span>{{ $t("replace_json") }}</span>
        <input
          ref="inputChooseFileToReplaceWith"
          class="input"
@@ -65,10 +67,10 @@
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('preserve_current')"
+          icon="create_new_folder"
+          :label="$t('import_json')"
          @click.native="openDialogChooseFileToImportFrom"
        />
-        <i class="material-icons">create_new_folder</i>
-        <span>{{ $t("import_json") }}</span>
        <input
          ref="inputChooseFileToImportFrom"
          class="input"
@@ -80,12 +82,10 @@
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('download_file')"
+          icon="drive_file_move"
+          :label="$t('export_as_json')"
          @click.native="exportJSON"
        />
-        <i class="material-icons">drive_file_move</i>
-        <span>
-          {{ $t("export_as_json") }}
-        </span>
      </div>
    </template>
  </SmartModal>
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -48,7 +48,7 @@
        {{ $t("import_export") }}
      </div>
    </div>
-    <p v-if="environments.length === 0" class="info">
+    <p v-if="environments.length === 0">
      <i class="material-icons">help_outline</i>
      {{ $t("create_new_environment") }}
    </p>
--- a/components/graphql/TypeLink.vue
+++ b/components/graphql/TypeLink.vue
@@ -2,7 +2,7 @@
  <span
    :class="{ 'cursor-pointer': !isScalar }"
    class="font-mono text-sm text-accent"
-    @click.native="jumpToType"
+    @click="jumpToType"
  >
    {{ typeString }}
  </span>
--- a/components/history/graphql/Card.vue
+++ b/components/history/graphql/Card.vue
@@ -10,7 +10,7 @@
          :value="entry.url"
          :placeholder="$t('empty_req_name')"
          class="input cursor-pointer text-sm bg-transparent"
-          @click.native="$emit('use-entry')"
+          @click="$emit('use-entry')"
        />
      </li>
      <ButtonSecondary
@@ -20,50 +20,44 @@
        }"
        data-testid="star_button"
        :class="{ stared: entry.star }"
+        :icon="entry.star ? 'star' : 'star_border'"
        @click.native="$emit('toggle-star')"
      />
-      <i class="material-icons">
-        {{ entry.star ? "star" : "star_border" }}
-      </i>
-
      <ButtonSecondary
        v-tippy="{ theme: 'tooltip' }"
        title="{
          content: expand ? $t('hide_more') : $t('show_more'),
        }"
        data-testid="query_expand"
+        :icon="expand ? 'unfold_less' : 'unfold_more'"
        @click.native="expand = !expand"
      />
-      <i class="material-icons">
-        {{ expand ? "unfold_less" : "unfold_more" }}
-      </i>
-
      <tippy tabindex="-1" trigger="click" theme="popover" arrow>
        <template #trigger>
          <ButtonSecondary
            v-tippy="{ theme: 'tooltip' }"
            :title="$t('options')"
            data-testid="options"
+            icon="more_vert"
          />
-          <i class="material-icons">more_vert</i>
        </template>
        <div>
          <ButtonSecondary
            data-testid="restore_history_entry"
            :aria-label="$t('restore')"
+            icon="restore"
+            :label="$t('restore')"
            @click.native="$emit('use-entry')"
          />
-          <i class="material-icons">restore</i>
-          <span>{{ $t("restore") }}</span>
        </div>
        <div>
          <ButtonSecondary
            data-testid="delete_history_entry"
            :aria-label="$t('delete')"
+            icon="delete"
+            :label="$t('delete')"
            @click.native="$emit('delete-entry')"
          />
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
        </div>
      </tippy>
    </div>
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -33,13 +33,10 @@
        />
      </ul>
    </div>
-    <p
-      :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }"
-      class="info"
-    >
+    <p :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }">
      {{ $t("nothing_found") }} "{{ filterText }}"
    </p>
-    <p v-if="history.length === 0" class="info">
+    <p v-if="history.length === 0">
      <i class="material-icons">schedule</i> {{ $t("history_empty") }}
    </p>
    <div v-if="history.length !== 0" class="rounded-b-lg bg-primaryDark">
@@ -47,21 +44,19 @@
        <ButtonSecondary
          data-testid="clear_history"
          :disabled="history.length === 0"
+          icon="clear_all"
+          :label="$t('clear_all')"
          @click.native="enableHistoryClearing"
        />
-        <i class="material-icons">clear_all</i>
-        <span>{{ $t("clear_all") }}</span>
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          title="{ content: !showMore ? $t('show_more') : $t('hide_more') }"
+          icon="!showMore ? 'unfold_more' : 'unfold_less'"
          @click.native="toggleCollapse()"
        />
-        <i class="material-icons">
-          {{ !showMore ? "unfold_more" : "unfold_less" }}
-        </i>
      </div>
      <div v-else class="row-wrapper">
-        <p class="info">
+        <p>
          <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
        </p>
        <div>
@@ -69,17 +64,16 @@
            v-tippy="{ theme: 'tooltip' }"
            :title="$t('yes')"
            data-testid="confirm_clear_history"
+            icon="done"
            @click.native="clearHistory"
          />
-          <i class="material-icons">done</i>
-
          <ButtonSecondary
            v-tippy="{ theme: 'tooltip' }"
            :title="$t('no')"
            data-testid="reject_clear_history"
+            icon="close"
            @click.native="disableHistoryClearing"
          />
-          <i class="material-icons">close</i>
        </div>
      </div>
    </div>
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -5,7 +5,7 @@
        class="p-2 m-2 truncate inline-flex cursor-pointer items-center text-sm"
        :class="entryStatus.className"
        :style="{ '--status-code': entry.status }"
-        @click.native="$emit('use-entry')"
+        @click="$emit('use-entry')"
      >
        {{ `${entry.method} \xA0 • \xA0 ${entry.status}` }}
      </span>
@@ -17,7 +17,7 @@
          :value="entry.name"
          :placeholder="$t('empty_req_name')"
          class="input cursor-pointer text-sm bg-transparent"
-          @click.native="$emit('use-entry')"
+          @click="$emit('use-entry')"
        />
      </li>
      <span>
@@ -28,11 +28,9 @@
          }"
          data-testid="star_button"
          :class="{ stared: entry.star }"
+          :icon="entry.star ? 'star' : 'star_border'"
          @click.native="$emit('toggle-star')"
        />
-        <i class="material-icons">
-          {{ entry.star ? "star" : "star_border" }}
-        </i>
      </span>
      <!-- <li>
            <ButtonSecondary
@@ -53,26 +51,26 @@
          <ButtonSecondary
            v-tippy="{ theme: 'tooltip' }"
            :title="$t('options')"
+            icon="more_vert"
          />
-          <i class="material-icons">more_vert</i>
        </template>
        <div>
          <ButtonSecondary
            data-testid="restore_history_entry"
            :aria-label="$t('edit')"
+            icon="restore"
+            :label="$t('restore')"
            @click.native="$emit('use-entry')"
          />
-          <i class="material-icons">restore</i>
-          <span>{{ $t("restore") }}</span>
        </div>
        <div>
          <ButtonSecondary
            data-testid="delete_history_entry"
            :aria-label="$t('delete')"
+            icon="delete"
+            :label="$t('delete')"
            @click.native="$emit('delete-entry')"
          />
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
        </div>
      </tippy>
    </div>
--- a/components/http/BodyParameters.vue
+++ b/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>
--- a/components/http/CodegenModal.vue
+++ b/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
--- a/components/http/Headers.vue
+++ b/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>
--- a/components/http/Parameters.vue
+++ b/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>
--- a/components/http/RawBody.vue
+++ b/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">
--- a/components/http/TokenList.vue
+++ b/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>
--- a/components/landing/Globe.vue
+++ b/components/landing/Globe.vue
@@ -139,7 +139,6 @@ export default {
        this.camera,
        this.renderer.domElement
      )
-      this.tbControls.rotateSpeed = 5
      this.tbControls.noZoom = true
      this.tbControls.noPan = true
    },
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -12,38 +12,34 @@
              ? $t('expand_response')
              : $t('collapse_response'),
          }"
+          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
          @click.native="ToggleExpandResponse"
        />
-        <i class="material-icons">
-          {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-        </i>
        <ButtonSecondary
          v-if="response.body"
          v-tippy="{ theme: 'tooltip' }"
          title="{
            content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
          }"
+          :icon="!previewEnabled ? 'visibility' : 'visibility_off'"
          @click.native.prevent="togglePreview"
        />
-        <i class="material-icons">
-          {{ !previewEnabled ? "visibility" : "visibility_off" }}
-        </i>
        <ButtonSecondary
          v-if="response.body"
          ref="downloadResponse"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('download_file')"
+          :icon="downloadIcon"
          @click.native="downloadResponse"
        />
-        <i class="material-icons">{{ downloadIcon }}</i>
        <ButtonSecondary
          v-if="response.body"
          ref="copyResponse"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('copy_response')"
+          :icon="copyIcon"
          @click.native="copyResponse"
        />
-        <i class="material-icons">{{ copyIcon }}</i>
      </div>
    </div>
    <div id="response-details-wrapper">
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -8,9 +8,9 @@
          ref="downloadResponse"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('download_file')"
+          :icon="downloadIcon"
          @click.native="downloadResponse"
        />
-        <i class="material-icons">{{ downloadIcon }}</i>
      </div>
    </div>
    <div id="response-details-wrapper">
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -12,27 +12,25 @@
              ? $t('expand_response')
              : $t('collapse_response'),
          }"
+          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
          @click.native="ToggleExpandResponse"
        />
-        <i class="material-icons">
-          {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-        </i>
        <ButtonSecondary
          v-if="response.body && canDownloadResponse"
          ref="downloadResponse"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('download_file')"
+          :icon="downloadIcon"
          @click.native="downloadResponse"
        />
-        <i class="material-icons">{{ downloadIcon }}</i>
        <ButtonSecondary
          v-if="response.body"
          ref="copyResponse"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('copy_response')"
+          :icon="copyIcon"
          @click.native="copyResponse"
        />
-        <i class="material-icons">{{ copyIcon }}</i>
      </div>
    </div>
    <div id="response-details-wrapper">
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -12,27 +12,25 @@
              ? $t('expand_response')
              : $t('collapse_response'),
          }"
+          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
          @click.native="ToggleExpandResponse"
        />
-        <i class="material-icons">
-          {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-        </i>
        <ButtonSecondary
          v-if="response.body && canDownloadResponse"
          ref="downloadResponse"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('download_file')"
+          :icon="downloadIcon"
          @click.native="downloadResponse"
        />
-        <i class="material-icons">{{ downloadIcon }}</i>
        <ButtonSecondary
          v-if="response.body"
          ref="copyResponse"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('copy_response')"
+          :icon="copyIcon"
          @click.native="copyResponse"
        />
-        <i class="material-icons">{{ copyIcon }}</i>
      </div>
    </div>
    <div id="response-details-wrapper">
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -12,27 +12,25 @@
              ? $t('expand_response')
              : $t('collapse_response'),
          }"
+          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
          @click.native="ToggleExpandResponse"
        />
-        <i class="material-icons">
-          {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-        </i>
        <ButtonSecondary
          v-if="response.body"
          ref="downloadResponse"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('download_file')"
+          :icon="downloadIcon"
          @click.native="downloadResponse"
        />
-        <i class="material-icons">{{ downloadIcon }}</i>
        <ButtonSecondary
          v-if="response.body"
          ref="copyResponse"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('copy_response')"
+          :icon="copyIcon"
          @click.native="copyResponse"
        />
-        <i class="material-icons">{{ copyIcon }}</i>
      </div>
    </div>
    <div id="response-details-wrapper">
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -15,19 +15,15 @@
        </li>
        <div>
          <li>
-            <label for="connect" class="hide-on-small-screen">&nbsp;</label>
            <ButtonSecondary
              id="connect"
              :disabled="!validUrl"
              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              :icon="!connectionState ? 'sync' : 'sync_disabled'"
+              :label="connectionState ? $t('disconnect') : $t('connect')"
+              reverse
              @click.native="toggleConnection"
            />
-            {{ connectionState ? $t("disconnect") : $t("connect") }}
-            <span>
-              <i class="material-icons">{{
-                !connectionState ? "sync" : "sync_disabled"
-              }}</i>
-            </span>
          </li>
        </div>
      </ul>
@@ -62,18 +58,15 @@
        </li>
        <div>
          <li>
-            <label for="publish" class="hide-on-small-screen">&nbsp;</label>
            <ButtonSecondary
              id="publish"
              class="button"
              name="get"
              :disabled="!canpublish"
+              icon="send"
+              :label="$t('mqtt_publish')"
              @click.native="publish"
            />
-            {{ $t("mqtt_publish") }}
-            <span>
-              <i class="material-icons">send</i>
-            </span>
          </li>
        </div>
      </ul>
@@ -90,22 +83,20 @@
        </li>
        <div>
          <li>
-            <label for="subscribe" class="hide-on-small-screen">&nbsp;</label>
            <ButtonSecondary
              id="subscribe"
              name="get"
              :disabled="!cansubscribe"
              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              :icon="subscriptionState ? 'sync_disabled' : 'sync'"
+              :label="
+                subscriptionState
+                  ? $t('mqtt_unsubscribe')
+                  : $t('mqtt_subscribe')
+              "
+              reverse
              @click.native="toggleSubscription"
            />
-            {{
-              subscriptionState ? $t("mqtt_unsubscribe") : $t("mqtt_subscribe")
-            }}
-            <span>
-              <i class="material-icons">{{
-                subscriptionState ? "sync_disabled" : "sync"
-              }}</i>
-            </span>
          </li>
        </div>
      </ul>
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -28,20 +28,16 @@
        </div>
        <div>
          <li>
-            <label for="connect" class="hide-on-small-screen">&nbsp;</label>
            <ButtonSecondary
              id="connect"
              :disabled="!urlValid"
              name="connect"
              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              :icon="!connectionState ? 'sync' : 'sync_disabled'"
+              :label="!connectionState ? $t('connect') : $t('disconnect')"
+              reverse
              @click.native="toggleConnection"
            />
-            {{ !connectionState ? $t("connect") : $t("disconnect") }}
-            <span>
-              <i class="material-icons">
-                {{ !connectionState ? "sync" : "sync_disabled" }}
-              </i>
-            </span>
          </li>
        </div>
      </ul>
@@ -101,9 +97,9 @@
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('delete')"
+              icon="delete"
              @click.native="removeCommunicationInput({ index })"
            />
-            <i class="material-icons">delete</i>
          </li>
        </div>
        <div v-if="index + 1 === communication.inputs.length">
@@ -113,20 +109,20 @@
              class="button"
              name="send"
              :disabled="!connectionState"
+              icon="send"
+              :label="$t('send')"
              @click.native="sendMessage"
            />
-            {{ $t("send") }}
-            <span>
-              <i class="material-icons">send</i>
-            </span>
          </li>
        </div>
      </ul>
      <ul>
        <li>
-          <ButtonSecondary @click.native="addCommunicationInput" />
-          <i class="material-icons">add</i>
-          <span>{{ $t("add_new") }}</span>
+          <ButtonSecondary
+            icon="add"
+            :label="$t('add_new')"
+            @click.native="addCommunicationInput"
+          />
        </li>
      </ul>
    </AppSection>
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -16,20 +16,16 @@
        </li>
        <div>
          <li>
-            <label for="start" class="hide-on-small-screen">&nbsp;</label>
            <ButtonSecondary
              id="start"
              :disabled="!serverValid"
              name="start"
              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              :icon="!connectionSSEState ? $t('start') : $t('stop')"
+              :label="!connectionSSEState ? 'sync' : 'sync_disabled'"
+              reverse
              @click.native="toggleSSEConnection"
            />
-            {{ !connectionSSEState ? $t("start") : $t("stop") }}
-            <span>
-              <i class="material-icons">
-                {{ !connectionSSEState ? "sync" : "sync_disabled" }}
-              </i>
-            </span>
          </li>
        </div>
      </ul>
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -17,20 +17,16 @@
        </li>
        <div>
          <li>
-            <label for="connect" class="hide-on-small-screen">&nbsp;</label>
            <ButtonSecondary
              id="connect"
              :disabled="!urlValid"
              class="button"
              name="connect"
+              :icon="!connectionState ? 'sync' : 'sync_disabled'"
+              :label="!connectionState ? $t('connect') : $t('disconnect')"
+              reverse
              @click.native="toggleConnection"
            />
-            {{ !connectionState ? $t("connect") : $t("disconnect") }}
-            <span>
-              <i class="material-icons">
-                {{ !connectionState ? "sync" : "sync_disabled" }}
-              </i>
-            </span>
          </li>
        </div>
      </ul>
@@ -96,17 +92,19 @@
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('delete')"
+              icon="delete"
              @click.native="deleteProtocol({ index })"
            />
-            <i class="material-icons">delete</i>
          </li>
        </div>
      </ul>
      <ul>
        <li>
-          <ButtonSecondary @click.native="addProtocol" />
-          <i class="material-icons">add</i>
-          <span>{{ $t("add_new") }}</span>
+          <ButtonSecondary
+            icon="add"
+            :label="$t('add_new')"
+            @click.native="addProtocol"
+          />
        </li>
      </ul>
    </AppSection>
@@ -134,18 +132,15 @@
        </li>
        <div>
          <li>
-            <label for="send" class="hide-on-small-screen">&nbsp;</label>
            <ButtonSecondary
              id="send"
              name="send"
              :disabled="!connectionState"
              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              icon="send"
+              :label="$t('send')"
              @click.native="sendMessage"
            />
-            {{ $t("send") }}
-            <span>
-              <i class="material-icons">send</i>
-            </span>
          </li>
        </div>
      </ul>
--- a/components/smart/AceEditor.vue
+++ b/components/smart/AceEditor.vue
@@ -2,7 +2,7 @@
  <div class="show-if-initialized" :class="{ initialized }">
    <div v-if="lang == 'json'" class="outline">
      <div v-for="(p, index) in currPath" :key="index" class="block">
-        <div class="label" @click.native="onBlockClick(index)">
+        <div class="label" @click="onBlockClick(index)">
          {{ p }}
        </div>
        <i v-if="index + 1 !== currPath.length" class="material-icons"
@@ -18,7 +18,7 @@
            v-for="(sib, i) in currSib"
            :key="i"
            class="sib"
-            @click.native="goToSib(sib)"
+            @click="goToSib(sib)"
          >
            {{ sib.key ? sib.key.value : i }}
          </div>
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -12,7 +12,7 @@
      :class="styles"
      @input="updateSuggestions"
      @keyup="updateSuggestions"
-      @click.native="updateSuggestions"
+      @click="updateSuggestions"
      @keydown="handleKeystroke"
    />
    <ul
@@ -24,7 +24,7 @@
        v-for="(suggestion, index) in suggestions"
        :key="index"
        :class="{ active: currentSuggestionIndex === index }"
-        @click.native.prevent="forceSuggestion(suggestion)"
+        @click.prevent="forceSuggestion(suggestion)"
      >
        {{ suggestion }}
      </li>
--- a/components/smart/HideMenu.vue
+++ b/components/smart/HideMenu.vue
@@ -1,48 +0,0 @@
-<template>
-  <div
-    v-tippy="{ theme: 'tooltip' }"
-    :title="$t(active ? 'hide_sidebar' : 'show_sidebar')"
-    class="
-      absolute
-      hidden
-      md:flex
-      items-center
-      justify-center
-      px-2
-      py-1
-      bg-divider
-      text-secondaryLight
-      hover:text-secondary
-      my-4
-      z-10
-      rounded-l
-      right-0
-      cursor-pointer
-    "
-    @click.native="$emit('toggle')"
-  >
-    <i
-      class="
-        transition
-        origin-center
-        transform
-        material-icons
-        pointer-events-none
-      "
-      :class="{ 'rotate-180': active }"
-    >
-      menu_open
-    </i>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    active: {
-      type: Boolean,
-      default: false,
-    },
-  },
-}
-</script>
--- a/components/teams/Add.vue
+++ b/components/teams/Add.vue
@@ -2,8 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("new_team") }}</h3>
-      <ButtonSecondary @click.native="hideModal" />
-      <i class="material-icons">close</i>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <ul>
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -2,8 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("edit_team") }}</h3>
-      <ButtonSecondary @click.native="hideModal" />
-      <i class="material-icons">close</i>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <ul>
@@ -91,9 +90,9 @@
              id="member"
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('delete')"
+              icon="delete"
              @click.native="removeExistingTeamMember(member.user.uid)"
            />
-            <i class="material-icons">delete</i>
          </li>
        </div>
      </ul>
@@ -155,17 +154,19 @@
              id="member"
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('delete')"
+              icon="delete"
              @click.native="removeTeamMember(index)"
            />
-            <i class="material-icons">delete</i>
          </li>
        </div>
      </ul>
      <ul>
        <li>
-          <ButtonSecondary @click.native="addTeamMember" />
-          <i class="material-icons">add</i>
-          <span>{{ $t("add_new") }}</span>
+          <ButtonSecondary
+            icon="add"
+            :label="$t('add_new')"
+            @click.native="addTeamMember"
+          />
        </li>
      </ul>
    </template>
@@ -193,7 +194,6 @@ export default {
  data() {
    return {
      rename: null,
-      doneButton: '<i class="material-icons">done</i>',
      members: [],
      newMembers: [],
      membersAdapter: new TeamMemberAdapter(null),
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -4,32 +4,39 @@
      <ButtonSecondary
        v-tippy="{ theme: 'tooltip' }"
        title="team.myRole === 'OWNER' ? $t('edit') : ''"
+        icon="group"
+        :label="team.name"
        @click.native="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
      />
-      <i class="material-icons">group</i>
-      <span>{{ team.name }}</span>
    </div>
    <tippy tabindex="-1" trigger="click" theme="popover" arrow>
      <template #trigger>
-        <ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
-        <i class="material-icons">more_vert</i>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('more')"
+          icon="more_vert"
+        />
      </template>
      <div v-if="team.myRole === 'OWNER'">
-        <ButtonSecondary @click.native="$emit('edit-team')" />
-        <i class="material-icons">create</i>
-        <span>{{ $t("edit") }}</span>
+        <ButtonSecondary
+          icon="create"
+          :label="$t('edit')"
+          @click.native="$emit('edit-team')"
+        />
      </div>
      <div v-if="team.myRole === 'OWNER'">
-        <ButtonSecondary @click.native="deleteTeam" />
-        <i class="material-icons">delete</i>
-        <span>{{ $t("delete") }}</span>
+        <ButtonSecondary
+          icon="delete"
+          :label="$t('delete')"
+          @click.native="deleteTeam"
+        />
      </div>
      <div>
        <ButtonSecondary
          :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
+          icon="remove"
          @click.native="exitTeam"
        />
-        <i class="material-icons">remove</i>
        <div
          v-tippy="{ theme: 'tooltip' }"
          title="{
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -32,10 +32,10 @@
        />
      </div>
    </div>
-    <p v-if="$apollo.queries.myTeams.loading" class="info">
+    <p v-if="$apollo.queries.myTeams.loading">
      {{ $t("loading") }}
    </p>
-    <p v-if="myTeams.length === 0" class="info">
+    <p v-if="myTeams.length === 0">
      <i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
    </p>
    <div v-else class="overflow-auto">