fix: button icons

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>

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),

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="{

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">