fix: button icons

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>