fix: button icons

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>

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>

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>

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>