fix: remove external dependency for icones (#805)

* change all icons to use iconify

* fix minor UI elements

* fix layout of table

frontend/components/Base/ActionsDivider.vue

@@ -1,14 +0,0 @@
-<template>
-  <div class="divider">
-    <div class="btn-group min-w-[180px] flex-nowrap">
-      <button name="options" class="btn btn-sm btn-primary" @click="$emit('edit')">
-        <Icon name="heroicons-pencil" class="h-5 w-5 mr-1" aria-hidden="true" />
-        <span> Edit </span>
-      </button>
-      <button name="options" class="btn btn-sm btn-primary" @click="$emit('delete')">
-        <Icon name="heroicons-trash" class="h-5 w-5 mr-1" aria-hidden="true" />
-        <span> Delete </span>
-      </button>
-    </div>
-  </div>
-</template>

frontend/components/Base/Card.vue

@@ -6,8 +6,8 @@
           <slot name="title"></slot>
           <template v-if="collapsable">
             <span class="ml-2 swap swap-rotate" :class="`${collapsed ? 'swap-active' : ''}`">
-              <Icon class="h-6 w-6 swap-on" name="mdi-chevron-right" />
-              <Icon class="h-6 w-6 swap-off" name="mdi-chevron-down" />
+              <MdiChevronRight class="h-6 w-6 swap-on" />
+              <MdiChevronDown class="h-6 w-6 swap-off" />
             </span>
           </template>
         </h3>
@@ -34,6 +34,9 @@
 </template>
 
 <script setup lang="ts">
+  import MdiChevronDown from "~icons/mdi/chevron-down";
+  import MdiChevronRight from "~icons/mdi/chevron-right";
+
   defineProps<{
     collapsable?: boolean;
   }>();

frontend/components/Base/SectionHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="pb-3">
     <h3
-      class="text-3xl font-bold tracking-tight"
+      class="text-3xl font-bold tracking-tight flex items-center"
       :class="{
         'text-neutral-content': dark,
         'text-content': !dark,