Use auto-imported icons

src/components/BotEntry.vue

@@ -15,13 +15,13 @@
           v-if="botStore.botStores[bot.botId].isBotLoggedIn"
           :title="botStore.botStores[bot.botId].isBotOnline ? 'Online' : 'Offline'"
         >
-          <OnlineIcon
+          <i-mdi-circle
             class="ms-2 me-1 align-middle"
             :class="botStore.botStores[bot.botId].isBotOnline ? 'online' : 'offline'"
-          ></OnlineIcon>
+          />
         </div>
         <div v-else title="Login info expired, please login again.">
-          <LoggedOutIcon class="offline" />
+          <i-mdi-cancel class="offline" />
         </div>
       </b-form-checkbox>
       <div v-if="!noButtons" class="float-end d-flex flex-align-center">
@@ -32,13 +32,13 @@
           title="Edit bot"
           @click="$emit('edit')"
         >
-          <EditIcon />
+          <i-mdi-cancel />
         </b-button>
         <b-button v-else class="ms-1" size="sm" title="Login again" @click="$emit('editLogin')">
-          <LoginIcon />
+          <i-mdi-login />
         </b-button>
         <b-button class="ms-1" size="sm" title="Delete bot" @click="botRemoveModalVisible = true">
-          <DeleteIcon />
+          <i-mdi-delete />
         </b-button>
       </div>
     </div>
@@ -58,11 +58,6 @@
 import { useBotStore } from '@/stores/ftbotwrapper';
 import { BotDescriptor } from '@/types';
 import { computed, ref } from 'vue';
-import LoggedOutIcon from '~icons/mdi/cancel';
-import OnlineIcon from '~icons/mdi/circle';
-import DeleteIcon from '~icons/mdi/delete';
-import LoginIcon from '~icons/mdi/login';
-import EditIcon from '~icons/mdi/pencil';
 
 const props = defineProps({
   bot: { required: true, type: Object as () => BotDescriptor },

src/components/ThemeSelect.vue

@@ -1,13 +1,12 @@
 <template>
   <b-link variant="outline-primary" class="nav-link" @click="toggleNight">
-    <ThemeLightDark />
+    <i-mdi-brightness-6 />
   </b-link>
 </template>
 
 <script setup lang="ts">
 import { useSettingsStore } from '@/stores/settings';
 import { onMounted, ref } from 'vue';
-import ThemeLightDark from '~icons/mdi/brightness-6';
 
 const activeTheme = ref('');
 const settingsStore = useSettingsStore();

src/components/charts/PlotIndicatorSelect.vue

@@ -11,7 +11,7 @@
       </v-select>
     </b-form-group>
     <b-button size="sm" title="Abort" class="ms-1 mt-auto" variant="secondary" @click="abort">
-      <CloseIcon />
+      <i-mdi-close />
     </b-button>
   </div>
 </template>
@@ -19,7 +19,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import vSelect from 'vue-select';
-import CloseIcon from '~icons/mdi/close';
 
 const props = defineProps({
   modelValue: { required: false, default: '', type: String },

src/components/ftbot/BotBalance.vue

@@ -9,16 +9,16 @@
           :title="!showBotOnly ? 'Showing Account balance' : 'Showing Bot balance'"
           @click="showBotOnly = !showBotOnly"
         >
-          <RobotIcon v-if="showBotOnly" />
+          <i-mdi-robot v-if="showBotOnly" />
-          <AccountIcon v-else />
+          <i-mdi-bank v-else />
         </b-button>
         <b-button
           size="sm"
           :title="!hideSmallBalances ? 'Hide small balances' : 'Show all balances'"
           @click="hideSmallBalances = !hideSmallBalances"
         >
-          <HideIcon v-if="hideSmallBalances" />
+          <i-mdi-eye-off v-if="hideSmallBalances" />
-          <ShowIcon v-else />
+          <i-mdi-eye v-else />
         </b-button>
 
         <b-button class="float-end" size="sm" @click="botStore.activeBot.getBalance"
@@ -64,10 +64,6 @@ import { useBotStore } from '@/stores/ftbotwrapper';
 import { BalanceValues } from '@/types';
 import { TableField } from 'bootstrap-vue-next';
 import { computed, ref } from 'vue';
-import AccountIcon from '~icons/mdi/bank';
-import HideIcon from '~icons/mdi/eye-off';
-import ShowIcon from '~icons/mdi/eye';
-import RobotIcon from '~icons/mdi/robot';
 
 const botStore = useBotStore();
 const hideSmallBalances = ref(true);

src/components/ftbot/BotControls.vue

@@ -7,7 +7,7 @@ forceexit
       title="Start Trading"
       @click="botStore.activeBot.startBot()"
     >
-      <PlayIcon height="24" width="24" />
+      <i-mdi-play height="24" width="24" />
     </button>
     <button
       class="btn btn-secondary btn-sm ms-1"
@@ -15,7 +15,7 @@ forceexit
       title="Stop Trading - Also stops handling open trades."
       @click="handleStopBot()"
     >
-      <StopIcon height="24" width="24" />
+      <i-mdi-stop height="24" width="24" />
     </button>
     <button
       class="btn btn-secondary btn-sm ms-1"
@@ -23,7 +23,7 @@ forceexit
       title="StopBuy - Stops buying, but still handles open trades"
       @click="handleStopBuy()"
     >
-      <PauseIcon height="24" width="24" />
+      <i-mdi-pause height="24" width="24" />
     </button>
     <button
       class="btn btn-secondary btn-sm ms-1"
@@ -31,7 +31,7 @@ forceexit
       title="Reload Config - reloads configuration including strategy, resetting all settings changed on the fly."
       @click="handleReloadConfig()"
     >
-      <ReloadIcon height="24" width="24" />
+      <i-mdi-reload height="24" width="24" />
     </button>
     <button
       class="btn btn-secondary btn-sm ms-1"
@@ -39,7 +39,7 @@ forceexit
       title="Force exit all"
       @click="handleForceExit()"
     >
-      <ForceExitIcon height="24" width="24" />
+      <i-mdi-close-box-multiple height="24" width="24" />
     </button>
     <button
       v-if="botStore.activeBot.botState && botStore.activeBot.botState.force_entry_enable"
@@ -48,7 +48,7 @@ forceexit
       title="Force enter - Immediately enter a trade at an optional price. Exits are then handled according to strategy rules."
       @click="forceEnter = true"
     >
-      <ForceEntryIcon style="font-size: 20px" />
+      <i-mdi-plus-box-multiple-outline style="font-size: 20px" />
     </button>
     <button
       v-if="botStore.activeBot.isWebserverMode && false"
@@ -57,7 +57,7 @@ forceexit
       title="Start Trading mode"
       @click="botStore.activeBot.startTrade()"
     >
-      <PlayIcon class="fs-4" />
+      <i-mdi-play class="fs-4" />
     </button>
     <ForceEntryForm v-model="forceEnter" :pair="botStore.activeBot.selectedPair" />
     <MessageBox ref="msgBox" />
@@ -69,12 +69,6 @@ import MessageBox, { MsgBoxObject } from '@/components/general/MessageBox.vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
 import { ForceSellPayload } from '@/types';
 import { computed, defineComponent, ref } from 'vue';
-import ForceExitIcon from '~icons/mdi/close-box-multiple';
-import PauseIcon from '~icons/mdi/pause';
-import PlayIcon from '~icons/mdi/play';
-import ForceEntryIcon from '~icons/mdi/plus-box-multiple-outline';
-import ReloadIcon from '~icons/mdi/reload';
-import StopIcon from '~icons/mdi/stop';
 
 import ForceEntryForm from './ForceEntryForm.vue';
 
@@ -82,12 +76,6 @@ export default defineComponent({
   name: 'BotControls',
   components: {
     ForceEntryForm,
-    PlayIcon,
-    StopIcon,
-    PauseIcon,
-    ReloadIcon,
-    ForceExitIcon,
-    ForceEntryIcon,
     MessageBox,
   },
   setup() {

src/components/ftbot/FTBotAPIPairList.vue

@@ -43,7 +43,7 @@
           :disabled="blacklistSelect.length === 0"
           @click="deletePairs"
         >
-          <DeleteIcon />
+          <i-mdi-delete />
         </b-button>
       </div>
       <b-popover
@@ -94,11 +94,9 @@
 <script lang="ts">
 import { useBotStore } from '@/stores/ftbotwrapper';
 import { defineComponent, onMounted, ref } from 'vue';
-import DeleteIcon from '~icons/mdi/delete';
 
 export default defineComponent({
   name: 'FTBotAPIPairList',
-  components: { DeleteIcon },
   setup() {
     const newblacklistpair = ref('');
     const blackListShow = ref(false);

src/components/ftbot/PairLockList.vue

@@ -13,7 +13,7 @@
             title="Delete trade"
             @click="removePairLock(row.item)"
           >
-            <DeleteIcon />
+            <i-mdi-delete />
           </b-button>
         </template>
       </b-table>
@@ -28,11 +28,9 @@ import { Lock } from '@/types';
 import { showAlert } from '@/stores/alerts';
 import { useBotStore } from '@/stores/ftbotwrapper';
 import { defineComponent } from 'vue';
-import DeleteIcon from '~icons/mdi/delete';
 
 export default defineComponent({
   name: 'PairLockList',
-  components: { DeleteIcon },
   setup() {
     const botStore = useBotStore();
 

src/components/ftbot/ReloadControl.vue

@@ -12,19 +12,17 @@
       title="Auto Refresh All bots"
       @click="botStore.allRefreshFull"
     >
-      <RefreshIcon />
+      <i-mdi-refresh />
     </b-button>
   </div>
 </template>
 
 <script lang="ts">
-import RefreshIcon from '~icons/mdi/refresh';
 import { defineComponent, computed } from 'vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
 
 export default defineComponent({
   name: 'ReloadControl',
-  components: { RefreshIcon },
   setup() {
     const botStore = useBotStore();
     const autoRefreshLoc = computed({

src/components/ftbot/TradeActions.vue

@@ -7,7 +7,7 @@
       title="Forceexit"
       @click="$emit('forceExit', trade)"
     >
-      <ForceSellIcon class="me-1" />Forceexit
+      <i-mdi-close-box class="me-1" />Forceexit
     </b-button>
     <b-button
       v-if="botApiVersion > 1.1"
@@ -16,7 +16,7 @@
       title="Forceexit limit"
       @click="$emit('forceExit', trade, 'limit')"
     >
-      <ForceSellIcon class="me-1" />Forceexit limit
+      <i-mdi-close-box class="me-1" />Forceexit limit
     </b-button>
     <b-button
       v-if="botApiVersion > 1.1"
@@ -25,7 +25,7 @@
       title="Forceexit market"
       @click="$emit('forceExit', trade, 'market')"
     >
-      <ForceSellIcon class="me-1" />Forceexit market
+      <i-mdi-close-box class="me-1" />Forceexit market
     </b-button>
     <b-button
       v-if="botApiVersion > 2.16"
@@ -34,7 +34,7 @@
       title="Forceexit partial"
       @click="$emit('forceExitPartial', trade)"
     >
-      <ForceSellPartialIcon class="me-1" />Forceexit partial
+      <i-mdi-close-box-multiple class="me-1" />Forceexit partial
     </b-button>
     <b-button
       v-if="botApiVersion >= 2.24 && trade.open_order_id"
@@ -43,7 +43,7 @@
       title="Cancel open orders"
       @click="$emit('cancelOpenOrder', trade)"
     >
-      <CancelIcon class="me-1" />Cancel open order
+      <i-mdi-cancel class="me-1" />Cancel open order
     </b-button>
 
     <b-button
@@ -52,7 +52,7 @@
       title="Delete trade"
       @click="$emit('deleteTrade', trade)"
     >
-      <DeleteIcon class="me-1" />
+      <i-mdi-delete class="me-1" />
       Delete
     </b-button>
   </div>
@@ -60,10 +60,6 @@
 
 <script setup lang="ts">
 import { Trade } from '@/types';
-import CancelIcon from '~icons/mdi/cancel';
-import ForceSellIcon from '~icons/mdi/close-box';
-import ForceSellPartialIcon from '~icons/mdi/close-box-multiple';
-import DeleteIcon from '~icons/mdi/delete';
 
 defineProps({
   botApiVersion: {

src/components/ftbot/TradeActionsPopover.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { Trade } from '@/types';
 import { ref } from 'vue';
-import CancelIcon from '~icons/mdi/cancel';
-import ActionIcon from '~icons/mdi/gesture-tap';
 import TradeActions from './TradeActions.vue';
 
 defineProps({
@@ -36,7 +34,7 @@ const cancelOpenOrderHandler = (item: Trade) => {
       title="Actions"
       @click="popoverOpen = !popoverOpen"
     >
-      <ActionIcon />
+      <i-mdi-gesture-tap />
     </b-button>
     <b-popover
       :target="`btn-actions-${id}`"
@@ -57,7 +55,7 @@ const cancelOpenOrderHandler = (item: Trade) => {
         @cancel-open-order="cancelOpenOrderHandler"
       />
       <b-button class="mt-1 w-100 text-start" size="sm" @click="popoverOpen = false">
-        <CancelIcon class="me-1" />Close Actions menu
+        <i-mdi-cancel class="me-1" />Close Actions menu
       </b-button>
     </b-popover>
   </div>

src/components/general/EditValue.vue

@@ -15,7 +15,7 @@
           :title="`Edit this ${editableName}.`"
           @click="editing = true"
         >
-          <EditIcon />
+          <i-mdi-pencil />
         </b-button>
         <b-button
           size="sm"
@@ -23,7 +23,7 @@
           :title="`Delete this ${editableName}.`"
           @click="$emit('delete', modelValue)"
         >
-          <DeleteIcon />
+          <i-mdi-delete />
         </b-button>
       </template>
       <b-button
@@ -32,7 +32,7 @@
         :title="`Add new ${editableName}.`"
         variant="primary"
         @click="addNewClick"
-        ><AddIcon />
+        ><i-mdi-plus-box-outline />
       </b-button>
       <template v-if="addNew || editing">
         <b-button
@@ -41,10 +41,10 @@
           variant="primary"
           @click="saveNewName"
         >
-          <CheckIcon />
+          <i-mdi-check />
         </b-button>
         <b-button size="sm" title="Abort" class="ms-1" variant="secondary" @click="abort">
-          <CloseIcon />
+          <i-mdi-close />
         </b-button>
       </template>
     </div>
@@ -52,12 +52,6 @@
 </template>
 
 <script setup lang="ts">
-import CheckIcon from '~icons/mdi/check';
-import CloseIcon from '~icons/mdi/close';
-import DeleteIcon from '~icons/mdi/delete';
-import EditIcon from '~icons/mdi/pencil';
-import AddIcon from '~icons/mdi/plus-box-outline';
-
 import { ref, watch } from 'vue';
 
 const props = defineProps({

src/views/LoginModal.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <b-button @click="openLoginModal()"><LoginIcon class="me-1" />{{ loginText }}</b-button>
+    <b-button @click="openLoginModal()"><i-mdi-login class="me-1" />{{ loginText }}</b-button>
     <b-modal
       id="modal-prevent-closing"
       v-model="loginViewOpen"
@@ -21,7 +21,6 @@
 import Login from '@/components/BotLogin.vue';
 import { AuthStorageWithBotId } from '@/types';
 import { nextTick, ref } from 'vue';
-import LoginIcon from '~icons/mdi/login';
 
 defineProps({
   loginText: { required: false, default: 'Login', type: String },

src/views/TradesList.vue

@@ -30,7 +30,7 @@
         size="sm"
         class="align-self-start mt-1 ms-1"
         @click="botStore.activeBot.setDetailTrade(null)"
-        ><BackIcon /> Back</b-button
+        ><i-mdi-arrow-left /> Back</b-button
       >
       <TradeDetail
         :trade="botStore.activeBot.tradeDetail"
@@ -45,14 +45,12 @@ import CustomTradeList from '@/components/ftbot/CustomTradeList.vue';
 import TradeDetail from '@/components/ftbot/TradeDetail.vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
 import { defineComponent } from 'vue';
-import BackIcon from '~icons/mdi/arrow-left';
 
 export default defineComponent({
   name: 'TradesList',
   components: {
     CustomTradeList,
     TradeDetail,
-    BackIcon,
   },
   props: {
     history: { default: false, type: Boolean },