fix: remove external dependency for icones (#805)

* change all icons to use iconify

* fix minor UI elements

* fix layout of table

frontend/components/App/Header.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+  import MdiPlus from "~icons/mdi/mdi-plus";
+
   const ctx = useAuthContext();
   const api = useUserApi();
 
@@ -103,7 +105,7 @@
         <div class="dropdown">
           <label tabindex="0" class="btn btn-primary btn-sm">
             <span>
-              <Icon name="mdi-plus" class="mr-1 -ml-1" />
+              <MdiPlus class="mr-1 -ml-1" />
             </span>
             Create
           </label>

frontend/components/App/ImportDialog.vue

@@ -32,7 +32,7 @@
         <input ref="importRef" type="file" class="hidden" accept=".csv,.tsv" @change="setFile" />
 
         <BaseButton type="button" @click="uploadCsv">
-          <Icon class="h-5 w-5 mr-2" name="mdi-upload" />
+          <MdiUpload class="h-5 w-5 mr-2" />
           Upload
         </BaseButton>
         <p class="text-center pt-4 -mb-5">
@@ -48,6 +48,7 @@
 </template>
 
 <script setup lang="ts">
+  import MdiUpload from "~icons/mdi/upload";
   type Props = {
     modelValue: boolean;
   };

frontend/components/App/Toast.vue

@@ -14,14 +14,14 @@
       >
         <div class="flex gap-1">
           <template v-if="notify.type == 'success'">
-            <Icon name="heroicons-check" class="h-5 w-5" />
+            <MdiCheckboxMarkedCircle class="h-5 w-5" />
           </template>
           <template v-if="notify.type == 'info'">
-            <Icon name="heroicons-information-circle" class="h-5 w-5" />
+            <MdiInformationSlabCircle class="h-5 w-5" />
           </template>
 
           <template v-if="notify.type == 'error'">
-            <Icon name="heroicons-bell-alert" class="h-5 w-5" />
+            <MdiAlert class="h-5 w-5" />
           </template>
           {{ notify.message }}
         </div>
@@ -31,6 +31,10 @@
 </template>
 
 <script setup lang="ts">
+  import MdiCheckboxMarkedCircle from "~icons/mdi/checkbox-marked-circle";
+  import MdiInformationSlabCircle from "~icons/mdi/information-slab-circle";
+  import MdiAlert from "~icons/mdi/alert";
+
   import { useNotifications } from "@/composables/use-notifier";
 
   const { notifications, dropNotification } = useNotifications();