From 922c0860b4038d40d52c51ce6d9b50aab74b9c8e Mon Sep 17 00:00:00 2001
From: Olivier Floch <olivier.floch@vates.fr>
Date: Mon, 23 Sep 2024 15:17:34 +0200
Subject: [PATCH] feat(xo-core): update `UiIcon` component

---
 .../src/components/infra/InfraHostItem.vue    |  4 +-
 .../web-core/icon/complex-icon.story.md       |  4 +-
 .../web-core/icon/complex-icon.story.vue      |  6 +-
 .../stories/web-core/icon/vts-icon.story.md   | 11 +++
 .../stories/web-core/icon/vts-icon.story.vue  | 39 ++++++++
 .../stories/web-core/tree/tree-list.story.md  |  4 +-
 .../stories/web-core/tree/tree-list.story.vue |  4 +-
 .../web-core/docs/guidelines/icons.md         |  2 +-
 .../web-core/lib/components/LegendTitle.vue   |  4 +-
 .../lib/components/PowerStateIcon.vue         |  4 +-
 .../web-core/lib/components/UiTag.vue         |  4 +-
 .../components/backup-state/BackupState.vue   |  7 +-
 .../lib/components/button/ButtonIcon.vue      |  4 +-
 .../lib/components/button/UiButton.vue        |  6 +-
 .../web-core/lib/components/chip/ChipIcon.vue |  5 +-
 .../lib/components/donut-chart/DonutChart.vue |  4 +-
 .../lib/components/dropdown/DropdownItem.vue  | 13 ++-
 .../lib/components/dropdown/DropdownTitle.vue |  4 +-
 .../lib/components/head-bar/HeadBar.vue       |  4 +-
 .../lib/components/icon/ObjectIcon.vue        |  8 +-
 .../web-core/lib/components/icon/UiIcon.vue   | 49 ----------
 .../web-core/lib/components/icon/VtsIcon.vue  | 96 +++++++++++++++++++
 .../web-core/lib/components/input/UiInput.vue |  8 +-
 .../lib/components/legend/LegendItem.vue      |  6 +-
 .../web-core/lib/components/menu/MenuItem.vue |  4 +-
 .../lib/components/menu/MenuTrigger.vue       |  4 +-
 .../lib/components/object-link/ObjectLink.vue |  6 +-
 .../lib/components/table/ColumnTitle.vue      |  8 +-
 .../lib/components/task/QuickTaskItem.vue     |  6 +-
 .../lib/components/tree/TreeItemLabel.vue     |  4 +-
 .../lib/components/tree/TreeLoadingItem.vue   |  4 +-
 .../web-core/lib/types/color.type.ts          |  2 -
 .../account-menu/AccountMenuTrigger.vue       |  4 +-
 .../web/src/components/tree/HostTreeItem.vue  |  4 +-
 34 files changed, 223 insertions(+), 123 deletions(-)
 create mode 100644 @xen-orchestra/lite/src/stories/web-core/icon/vts-icon.story.md
 create mode 100644 @xen-orchestra/lite/src/stories/web-core/icon/vts-icon.story.vue
 delete mode 100644 @xen-orchestra/web-core/lib/components/icon/UiIcon.vue
 create mode 100644 @xen-orchestra/web-core/lib/components/icon/VtsIcon.vue

diff --git a/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue b/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
index e6e586a3451..354e30cbe76 100644
--- a/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
+++ b/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
@@ -3,7 +3,7 @@
     <TreeItemLabel :icon="faServer" :route="{ name: 'host.dashboard', params: { uuid: host.uuid } }" @toggle="toggle()">
       {{ host.name_label || '(Host)' }}
       <template #addons>
-        <UiIcon v-if="isPoolMaster" v-tooltip="$t('master')" :icon="faStar" color="warning" />
+        <VtsIcon v-if="isPoolMaster" v-tooltip="$t('master')" :icon="faStar" accent="warning" />
         <VtsCounter
           v-if="isReady"
           v-tooltip="$t('running-vm', { count: vmCount })"
@@ -29,7 +29,7 @@ import { useHostStore } from '@/stores/xen-api/host.store'
 import { usePoolStore } from '@/stores/xen-api/pool.store'
 import { useVmStore } from '@/stores/xen-api/vm.store'
 import VtsCounter from '@core/components/counter/VtsCounter.vue'
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
 import TreeList from '@core/components/tree/TreeList.vue'
diff --git a/@xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.md b/@xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.md
index cd2dceb165d..1819877491e 100644
--- a/@xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.md
+++ b/@xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.md
@@ -2,8 +2,8 @@ ComplexIcon component usage:
 
 ```vue-template
 <ComplexIcon>
-  <UiIcon :icon="faRotateRight" />
-  <UiIcon :icon="faLightbulb" />
+  <UiIcon :icon="faRotateRight" accent="current" />
+  <UiIcon :icon="faLightbulb" accent="current" />
 </ComplexIcon>
 ```
 
diff --git a/@xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.vue b/@xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.vue
index b0fbe85be8e..32752f906cd 100644
--- a/@xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.vue
@@ -7,8 +7,8 @@
     ]"
   >
     <ComplexIcon v-bind="properties">
-      <UiIcon :icon="faRotateRight" />
-      <UiIcon :icon="faLightbulb" />
+      <VtsIcon :icon="faRotateRight" accent="current" />
+      <VtsIcon :icon="faLightbulb" accent="current" />
     </ComplexIcon>
   </ComponentStory>
 </template>
@@ -17,6 +17,6 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, slot } from '@/libs/story/story-param'
 import ComplexIcon from '@core/components/icon/ComplexIcon.vue'
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { faLightbulb, faRotateRight } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/icon/vts-icon.story.md b/@xen-orchestra/lite/src/stories/web-core/icon/vts-icon.story.md
new file mode 100644
index 00000000000..82ed1cc2bca
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/icon/vts-icon.story.md
@@ -0,0 +1,11 @@
+`VtsIcon` component **simple** usage:
+
+```vue-template
+<VtsIcon accent="current" :icon="faCheck" />
+```
+
+`VtsIcon` component **stacked** usage:
+
+```vue-template
+<VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
+```
diff --git a/@xen-orchestra/lite/src/stories/web-core/icon/vts-icon.story.vue b/@xen-orchestra/lite/src/stories/web-core/icon/vts-icon.story.vue
new file mode 100644
index 00000000000..6b99aebcfcb
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/icon/vts-icon.story.vue
@@ -0,0 +1,39 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties }"
+    :params="[
+      prop('accent').enum('current', 'brand', 'success', 'warning', 'danger').required().preset('current').widget(),
+      iconProp().preset(faCheck),
+      prop('overlay-icon')
+        .type('IconDefinition')
+        .help('Meant to display a centered smaller icon on top of the main icon. See presets for examples'),
+      prop('busy').bool().widget(),
+      prop('fixed-width').bool().widget(),
+    ]"
+    :presets="{
+      'Stacked Icon success circle': {
+        props: {
+          accent: 'success',
+          icon: faCircle,
+          'overlay-icon': faCheck,
+        },
+      },
+      'Stacked Icon warning exclamation': {
+        props: {
+          accent: 'warning',
+          icon: faCircle,
+          'overlay-icon': faExclamation,
+        },
+      },
+    }"
+  >
+    <VtsIcon v-bind="properties" />
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { iconProp, prop } from '@/libs/story/story-param'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { faCheck, faCircle, faExclamation } from '@fortawesome/free-solid-svg-icons'
+</script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.md b/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.md
index 32859ec5b95..7f41073cdcc 100644
--- a/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.md
+++ b/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.md
@@ -23,7 +23,7 @@
                   </template>
                   VM {{ i }}.{{ j }}
                   <template #addons>
-                    <UiIcon v-if="j === 2" busy />
+                    <VtsIcon v-if="j === 2" busy accent="current" />
                     <ButtonIcon :icon="faEllipsis" />
                   </template>
                 </TreeItemLabel>
@@ -38,10 +38,10 @@
 ```
 
 ```vue-script
-import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import ButtonIcon from '@core/components/button/ButtonIcon.vue'
 import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
 import TreeList from '@core/components/tree/TreeList.vue'
diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.vue b/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.vue
index 935952b159d..544a7109bf3 100644
--- a/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.vue
@@ -22,7 +22,7 @@
                       </template>
                       VM {{ i }}.{{ j }}
                       <template #addons>
-                        <UiIcon v-if="j === 2" busy />
+                        <VtsIcon v-if="j === 2" busy accent="current" />
                         <ButtonIcon :icon="faEllipsis" />
                       </template>
                     </TreeItemLabel>
@@ -39,11 +39,11 @@
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
-import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import { slot } from '@/libs/story/story-param'
 import ButtonIcon from '@core/components/button/ButtonIcon.vue'
 import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
 import TreeList from '@core/components/tree/TreeList.vue'
diff --git a/@xen-orchestra/web-core/docs/guidelines/icons.md b/@xen-orchestra/web-core/docs/guidelines/icons.md
index b082bd82862..893a51a6917 100644
--- a/@xen-orchestra/web-core/docs/guidelines/icons.md
+++ b/@xen-orchestra/web-core/docs/guidelines/icons.md
@@ -15,7 +15,7 @@ Use the `busy` prop to display a loader icon.
 ```vue
 <template>
   <div>
-    <UiIcon :icon="faDisplay" />
+    <VtsIcon :icon="faDisplay" accent="current" />
   </div>
 </template>
 
diff --git a/@xen-orchestra/web-core/lib/components/LegendTitle.vue b/@xen-orchestra/web-core/lib/components/LegendTitle.vue
index f034b34eb17..59d36e066b0 100644
--- a/@xen-orchestra/web-core/lib/components/LegendTitle.vue
+++ b/@xen-orchestra/web-core/lib/components/LegendTitle.vue
@@ -2,12 +2,12 @@
 <template>
   <div class="legend-title typo c3-semi-bold">
     <slot />
-    <UiIcon v-tooltip="iconTooltip ?? false" :icon color="normal" />
+    <VtsIcon v-tooltip="iconTooltip ?? false" :icon accent="brand" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
diff --git a/@xen-orchestra/web-core/lib/components/PowerStateIcon.vue b/@xen-orchestra/web-core/lib/components/PowerStateIcon.vue
index 304b4f044a7..7ffc29d45d5 100644
--- a/@xen-orchestra/web-core/lib/components/PowerStateIcon.vue
+++ b/@xen-orchestra/web-core/lib/components/PowerStateIcon.vue
@@ -1,10 +1,10 @@
 <!-- v1.0 -->
 <template>
-  <UiIcon :class="className" color="current" :icon class="power-state-icon" />
+  <VtsIcon :class="className" accent="current" :icon class="power-state-icon" />
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { POWER_STATE } from '@core/types/power-state.type'
 import { faMoon, faPause, faPlay, faStop } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
diff --git a/@xen-orchestra/web-core/lib/components/UiTag.vue b/@xen-orchestra/web-core/lib/components/UiTag.vue
index 0f4573e1967..afa0e85239e 100644
--- a/@xen-orchestra/web-core/lib/components/UiTag.vue
+++ b/@xen-orchestra/web-core/lib/components/UiTag.vue
@@ -2,14 +2,14 @@
 <template>
   <span :class="[color, { light }]" class="ui-tag typo p3-regular">
     <slot name="icon">
-      <UiIcon :icon color="current" fixed-width />
+      <VtsIcon :icon accent="current" fixed-width />
     </slot>
     <span class="text-ellipsis"><slot /></span>
   </span>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { TagColor } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
diff --git a/@xen-orchestra/web-core/lib/components/backup-state/BackupState.vue b/@xen-orchestra/web-core/lib/components/backup-state/BackupState.vue
index cfe4a633c99..1b1c7e4556f 100644
--- a/@xen-orchestra/web-core/lib/components/backup-state/BackupState.vue
+++ b/@xen-orchestra/web-core/lib/components/backup-state/BackupState.vue
@@ -1,12 +1,11 @@
 <!-- v1.0 -->
 <template>
-  <UiIcon :color :icon class="backup-state" />
+  <VtsIcon :accent="color" :icon class="backup-state" />
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { BackupState } from '@core/types/backup.type'
-import type { Color } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faCheckCircle, faCircleMinus, faCircleXmark } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
@@ -17,7 +16,7 @@ type Props = {
 
 const props = defineProps<Props>()
 
-const states: Record<Props['state'], { icon: IconDefinition; color: Color }> = {
+const states: Record<Props['state'], { icon: IconDefinition; color: 'success' | 'warning' | 'danger' }> = {
   success: { icon: faCheckCircle, color: 'success' },
   partial: { icon: faCircleMinus, color: 'warning' },
   failure: { icon: faCircleXmark, color: 'danger' },
diff --git a/@xen-orchestra/web-core/lib/components/button/ButtonIcon.vue b/@xen-orchestra/web-core/lib/components/button/ButtonIcon.vue
index 2160582d4ee..c337bf26003 100644
--- a/@xen-orchestra/web-core/lib/components/button/ButtonIcon.vue
+++ b/@xen-orchestra/web-core/lib/components/button/ButtonIcon.vue
@@ -1,13 +1,13 @@
 <!-- v1.0 -->
 <template>
   <button :class="[color, size, { disabled, active }]" :disabled class="button-icon" type="button">
-    <UiIcon :icon color="current" />
+    <VtsIcon :icon accent="current" />
     <span v-if="dot" class="dot" />
   </button>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { Color } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { computed } from 'vue'
diff --git a/@xen-orchestra/web-core/lib/components/button/UiButton.vue b/@xen-orchestra/web-core/lib/components/button/UiButton.vue
index a4e44337d6b..75c7a88c3de 100644
--- a/@xen-orchestra/web-core/lib/components/button/UiButton.vue
+++ b/@xen-orchestra/web-core/lib/components/button/UiButton.vue
@@ -1,14 +1,14 @@
 <!-- v1.0 -->
 <template>
   <button :class="className" :disabled="busy || isDisabled" class="ui-button" type="button">
-    <UiIcon :busy :icon="leftIcon" color="current" class="icon" fixed-width />
+    <VtsIcon :busy :icon="leftIcon" accent="current" class="icon" fixed-width />
     <slot />
-    <UiIcon :icon="rightIcon" color="current" class="icon" fixed-width />
+    <VtsIcon :icon="rightIcon" accent="current" class="icon" fixed-width />
   </button>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { useContext } from '@core/composables/context.composable'
 import { DisabledContext } from '@core/context'
 import type { ButtonLevel, ButtonSize } from '@core/types/button.type'
diff --git a/@xen-orchestra/web-core/lib/components/chip/ChipIcon.vue b/@xen-orchestra/web-core/lib/components/chip/ChipIcon.vue
index aa13f93de14..bec6e2ebdba 100644
--- a/@xen-orchestra/web-core/lib/components/chip/ChipIcon.vue
+++ b/@xen-orchestra/web-core/lib/components/chip/ChipIcon.vue
@@ -1,9 +1,10 @@
 <template>
-  <UiIcon :class="{ disabled }" :color :icon class="chip-icon" fixed-width />
+  <!-- TODO: replace with correct color typing when available -->
+  <VtsIcon :class="{ disabled }" :accent="color === 'normal' ? 'brand' : color" :icon class="chip-icon" fixed-width />
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { Color } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
diff --git a/@xen-orchestra/web-core/lib/components/donut-chart/DonutChart.vue b/@xen-orchestra/web-core/lib/components/donut-chart/DonutChart.vue
index 60a193cb043..89eb235194a 100644
--- a/@xen-orchestra/web-core/lib/components/donut-chart/DonutChart.vue
+++ b/@xen-orchestra/web-core/lib/components/donut-chart/DonutChart.vue
@@ -13,12 +13,12 @@
       cy="50"
       r="40"
     />
-    <UiIcon :icon color="current" height="24" width="24" x="38" y="38" />
+    <VtsIcon :icon accent="current" height="24" width="24" x="38" y="38" />
   </svg>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { computed } from 'vue'
 
diff --git a/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue b/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue
index d2c89f44388..4518649b4a8 100644
--- a/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue
+++ b/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue
@@ -1,19 +1,24 @@
 <template>
   <div v-tooltip="{ selector: '.label' }" :class="[color, { disabled, selected }]" class="dropdown-item">
-    <UiIcon v-if="checkbox" :color :icon="selected ? faSquareCheck : faSquare" />
+    <!-- TODO: replace with correct color typing when available -->
+    <VtsIcon
+      v-if="checkbox"
+      :accent="color === 'normal' ? 'brand' : color"
+      :icon="selected ? faSquareCheck : faSquare"
+    />
     <slot name="icon">
-      <UiIcon :icon color="current" />
+      <VtsIcon :icon accent="current" />
     </slot>
     <div class="label p2 medium text-ellipsis">
       <slot />
     </div>
     <div v-if="info" class="info-text p3 italic">{{ info }}</div>
-    <UiIcon v-if="arrow" :color="disabled ? 'current' : 'normal'" :icon="faAngleRight" class="right-icon" />
+    <VtsIcon v-if="arrow" :accent="disabled ? 'current' : 'brand'" :icon="faAngleRight" class="right-icon" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import type { Color } from '@core/types/color.type'
 import { IK_DROPDOWN_CHECKBOX } from '@core/utils/injection-keys.util'
diff --git a/@xen-orchestra/web-core/lib/components/dropdown/DropdownTitle.vue b/@xen-orchestra/web-core/lib/components/dropdown/DropdownTitle.vue
index 06b9b22d3bf..d38dcb4e5fa 100644
--- a/@xen-orchestra/web-core/lib/components/dropdown/DropdownTitle.vue
+++ b/@xen-orchestra/web-core/lib/components/dropdown/DropdownTitle.vue
@@ -4,7 +4,7 @@
  -->
 <template>
   <div class="dropdown-title">
-    <UiIcon :icon color="current" />
+    <VtsIcon :icon accent="current" />
     <div class="label c3 semi-bold">
       <slot />
     </div>
@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
 withDefaults(
diff --git a/@xen-orchestra/web-core/lib/components/head-bar/HeadBar.vue b/@xen-orchestra/web-core/lib/components/head-bar/HeadBar.vue
index 5ea8fb19262..5ad56018928 100644
--- a/@xen-orchestra/web-core/lib/components/head-bar/HeadBar.vue
+++ b/@xen-orchestra/web-core/lib/components/head-bar/HeadBar.vue
@@ -4,7 +4,7 @@
     <div class="label-wrapper">
       <span v-if="slots.icon || icon" class="icon">
         <slot name="icon">
-          <UiIcon :icon color="current" />
+          <VtsIcon :icon accent="current" />
         </slot>
       </span>
       <h4 v-tooltip class="typo h4-medium label text-ellipsis">
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
diff --git a/@xen-orchestra/web-core/lib/components/icon/ObjectIcon.vue b/@xen-orchestra/web-core/lib/components/icon/ObjectIcon.vue
index 8d0b6b90c0d..41cae332102 100644
--- a/@xen-orchestra/web-core/lib/components/icon/ObjectIcon.vue
+++ b/@xen-orchestra/web-core/lib/components/icon/ObjectIcon.vue
@@ -5,13 +5,13 @@
 <!-- Network v1.0 -->
 <template>
   <FontAwesomeLayers :class="[size, { disabled: stateConfig === undefined }]" class="object-icon">
-    <UiIcon :icon="mainIcon" color="current" />
-    <UiIcon :icon="stateIcon" color="current" :style="stateIconStyle" class="state" />
+    <VtsIcon :icon="mainIcon" accent="current" />
+    <VtsIcon :icon="stateIcon" accent="current" :style="stateIconStyle" class="state" />
   </FontAwesomeLayers>
 </template>
 
 <script generic="TType extends SupportedType" lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { ObjectIconConfig, ObjectIconSize, SupportedState, SupportedType } from '@core/types/object-icon.type'
 import {
   faCheckCircle,
@@ -200,7 +200,7 @@ const stateIconStyle = computed(() => {
   }
 
   return {
-    '--color': `var(${stateConfig.value.color})`,
+    '--vts-icon--color': `var(${stateConfig.value.color})`,
     '--state-icon-translate-x': `${stateConfig.value.translate.x[translateIndex]}%`,
     '--state-icon-translate-y': `${stateConfig.value.translate.y[translateIndex]}%`,
   }
diff --git a/@xen-orchestra/web-core/lib/components/icon/UiIcon.vue b/@xen-orchestra/web-core/lib/components/icon/UiIcon.vue
deleted file mode 100644
index 1260bb25e92..00000000000
--- a/@xen-orchestra/web-core/lib/components/icon/UiIcon.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <UiSpinner v-if="busy" class="ui-icon" />
-  <FontAwesomeIcon v-else-if="icon !== undefined" :class="color" :fixed-width="fixedWidth" :icon class="ui-icon" />
-</template>
-
-<script lang="ts" setup>
-import UiSpinner from '@core/components/UiSpinner.vue'
-import type { IconColor } from '@core/types/color.type'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-
-defineProps<{
-  busy?: boolean
-  icon?: IconDefinition
-  fixedWidth?: boolean
-  color: IconColor
-}>()
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.ui-icon {
-  &.current {
-    --color: currentColor;
-  }
-
-  &.normal {
-    --color: var(--color-normal-item-base);
-  }
-
-  &.success {
-    --color: var(--color-success-item-base);
-  }
-
-  &.warning {
-    --color: var(--color-warning-item-base);
-  }
-
-  &.danger {
-    --color: var(--color-danger-item-base);
-  }
-}
-
-/* IMPLEMENTATION */
-.ui-icon {
-  color: var(--color);
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/icon/VtsIcon.vue b/@xen-orchestra/web-core/lib/components/icon/VtsIcon.vue
new file mode 100644
index 00000000000..2ed04d9d197
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/icon/VtsIcon.vue
@@ -0,0 +1,96 @@
+<!-- v2 -->
+<template>
+  <UiSpinner v-if="busy" class="vts-icon" />
+  <div v-else-if="overlayIcon !== undefined && icon !== undefined" class="vts-icon stacked" :class="accent">
+    <FontAwesomeIcon :fixed-width="fixedWidth" :icon />
+    <FontAwesomeIcon class="overlay-icon" :fixed-width="fixedWidth" :icon="overlayIcon" />
+  </div>
+  <FontAwesomeIcon v-else-if="icon !== undefined" :class="accent" :fixed-width="fixedWidth" :icon class="vts-icon" />
+</template>
+
+<script lang="ts" setup>
+import UiSpinner from '@core/components/UiSpinner.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+type IconAccent = 'current' | 'brand' | 'success' | 'warning' | 'danger'
+
+defineProps<{
+  accent: IconAccent
+  icon?: IconDefinition
+  overlayIcon?: IconDefinition
+  busy?: boolean
+  fixedWidth?: boolean
+}>()
+</script>
+
+<style lang="postcss" scoped>
+/*
+ACCENT
+--vts-icon--color
+--vts-icon__overlay-icon--color
+*/
+.vts-icon {
+  &.current {
+    --vts-icon--color: currentColor;
+
+    &.stacked {
+      --vts-icon__overlay-icon--color: var(--color-neutral-background-primary);
+    }
+  }
+
+  &.brand {
+    --vts-icon--color: var(--color-normal-item-base);
+
+    &.stacked {
+      --vts-icon__overlay-icon--color: var(--color-normal-txt-item);
+    }
+  }
+
+  &.success {
+    --vts-icon--color: var(--color-success-item-base);
+
+    &.stacked {
+      --vts-icon__overlay-icon--color: var(--color-success-txt-item);
+    }
+  }
+
+  &.warning {
+    --vts-icon--color: var(--color-warning-item-base);
+
+    &.stacked {
+      --vts-icon__overlay-icon--color: var(--color-warning-txt-item);
+    }
+  }
+
+  &.danger {
+    --vts-icon--color: var(--color-danger-item-base);
+
+    &.stacked {
+      --vts-icon__overlay-icon--color: var(--color-danger-txt-item);
+    }
+  }
+}
+
+/* IMPLEMENTATION */
+.vts-icon {
+  color: var(--vts-icon--color);
+
+  &.stacked {
+    display: inline-grid;
+    place-items: center;
+
+    .overlay-icon {
+      color: var(--vts-icon__overlay-icon--color);
+    }
+
+    svg {
+      grid-area: 1 / -1;
+
+      &:last-child {
+        font-size: 0.75rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/input/UiInput.vue b/@xen-orchestra/web-core/lib/components/input/UiInput.vue
index 8b12b64603e..313964616de 100644
--- a/@xen-orchestra/web-core/lib/components/input/UiInput.vue
+++ b/@xen-orchestra/web-core/lib/components/input/UiInput.vue
@@ -1,20 +1,20 @@
 <!-- WIP -->
 <template>
   <div class="ui-input">
-    <UiIcon :icon color="current" class="before" />
+    <VtsIcon :icon accent="current" class="before" />
     <input :id v-model.trim="modelValue" class="typo p1-regular input" type="search" v-bind="$attrs" />
-    <UiIcon
+    <VtsIcon
       v-if="!$attrs.disabled && modelValue"
       :icon="faXmark"
       class="after"
-      color="normal"
+      accent="brand"
       @click="modelValue = ''"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { uniqueId } from '@core/utils/unique-id.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
diff --git a/@xen-orchestra/web-core/lib/components/legend/LegendItem.vue b/@xen-orchestra/web-core/lib/components/legend/LegendItem.vue
index ce6bfef6d04..9c506c88de6 100644
--- a/@xen-orchestra/web-core/lib/components/legend/LegendItem.vue
+++ b/@xen-orchestra/web-core/lib/components/legend/LegendItem.vue
@@ -1,15 +1,15 @@
 <!-- v1.0 -->
 <template>
   <li :class="color" class="legend-item">
-    <UiIcon :icon="faCircle" color="current" class="circle-icon" />
+    <VtsIcon :icon="faCircle" accent="brand" class="circle-icon" />
     <span class="label typo p3-regular"><slot /></span>
-    <UiIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" color="normal" />
+    <VtsIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" accent="brand" />
     <span v-if="valueLabel" class="value-and-unit typo c3-semi-bold">{{ valueLabel }}</span>
   </li>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faCircle, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
diff --git a/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue b/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue
index a7dad342304..fd9fb27d288 100644
--- a/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue
+++ b/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue
@@ -15,7 +15,7 @@
       <template #trigger="{ open, isOpen }">
         <MenuTrigger :active="isOpen" :busy="isBusy" :disabled="isDisabled" :icon @click="open">
           <slot />
-          <UiIcon :fixed-width="false" :icon="submenuIcon" color="current" class="submenu-icon" />
+          <VtsIcon :fixed-width="false" :icon="submenuIcon" accent="current" class="submenu-icon" />
         </MenuTrigger>
       </template>
       <slot name="submenu" />
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
 import MenuTrigger from '@core/components/menu/MenuTrigger.vue'
 import { useContext } from '@core/composables/context.composable'
diff --git a/@xen-orchestra/web-core/lib/components/menu/MenuTrigger.vue b/@xen-orchestra/web-core/lib/components/menu/MenuTrigger.vue
index f6971427145..1645fa3770c 100644
--- a/@xen-orchestra/web-core/lib/components/menu/MenuTrigger.vue
+++ b/@xen-orchestra/web-core/lib/components/menu/MenuTrigger.vue
@@ -1,13 +1,13 @@
 <!-- v1.0 -->
 <template>
   <div :class="{ active, disabled }" class="menu-trigger">
-    <UiIcon :busy :icon color="current" />
+    <VtsIcon :busy :icon accent="current" />
     <slot />
   </div>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
 defineProps<{
diff --git a/@xen-orchestra/web-core/lib/components/object-link/ObjectLink.vue b/@xen-orchestra/web-core/lib/components/object-link/ObjectLink.vue
index f6275889c01..025bfb2ad92 100644
--- a/@xen-orchestra/web-core/lib/components/object-link/ObjectLink.vue
+++ b/@xen-orchestra/web-core/lib/components/object-link/ObjectLink.vue
@@ -3,7 +3,7 @@
   <RouterLink v-if="route && !disabled" :to="route" class="object-link is-link typo p3-medium">
     <span class="icon">
       <slot name="icon">
-        <UiIcon :icon color="current" />
+        <VtsIcon :icon accent="current" />
       </slot>
     </span>
     <span v-tooltip class="content text-ellipsis">
@@ -13,7 +13,7 @@
   <span v-else :class="{ disabled }" class="object-link typo p3-medium">
     <span class="icon">
       <slot name="icon">
-        <UiIcon :icon color="current" />
+        <VtsIcon :icon accent="current" />
       </slot>
     </span>
     <slot />
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { type RouteLocationRaw } from 'vue-router'
diff --git a/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue b/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue
index 8d9cdf600df..0b8b7443393 100644
--- a/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue
+++ b/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue
@@ -9,10 +9,10 @@
       >
         <div class="content">
           <span class="label">
-            <UiIcon :icon color="current" />
+            <VtsIcon :icon accent="current" />
             <slot />
           </span>
-          <UiIcon :icon="currentInteraction?.icon" color="current" />
+          <VtsIcon :icon="currentInteraction?.icon" accent="current" />
         </div>
       </th>
     </template>
@@ -23,7 +23,7 @@
       :disabled="interaction.disabled"
       :on-click="() => updateInteraction(interaction)"
     >
-      <UiIcon :icon="interaction.icon" color="current" />
+      <VtsIcon :icon="interaction.icon" accent="current" />
       {{ interaction.label }}
       <i v-if="currentInteraction?.id === interaction.id" class="current-interaction typo p3-regular-italic">
         {{ $t('core.current').toLowerCase() }}
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import MenuItem from '@core/components/menu/MenuItem.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
diff --git a/@xen-orchestra/web-core/lib/components/task/QuickTaskItem.vue b/@xen-orchestra/web-core/lib/components/task/QuickTaskItem.vue
index 5110e2b0f79..ad9d9ac009a 100644
--- a/@xen-orchestra/web-core/lib/components/task/QuickTaskItem.vue
+++ b/@xen-orchestra/web-core/lib/components/task/QuickTaskItem.vue
@@ -11,14 +11,14 @@
         <div class="line-1">
           <UiTag v-if="task.tag" color="secondary">{{ task.tag }}</UiTag>
           <div v-if="hasSubTasks" class="subtasks">
-            <UiIcon :icon="faCircleNotch" color="current" />
+            <VtsIcon :icon="faCircleNotch" accent="current" />
             <span class="typo p4-medium">{{ $t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
           </div>
         </div>
         <div v-if="task.start" class="line-2 typo p4-regular">
           {{ $d(task.start, 'datetime_short') }}
           <template v-if="task.end">
-            <UiIcon :icon="faArrowRight" color="current" />
+            <VtsIcon :icon="faArrowRight" accent="current" />
             {{ $d(new Date(task.end), 'datetime_short') }}
           </template>
         </div>
@@ -30,7 +30,7 @@
 
 <script lang="ts" setup>
 import ButtonIcon from '@core/components/button/ButtonIcon.vue'
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import QuickTaskList from '@core/components/task/QuickTaskList.vue'
 import UiTag from '@core/components/UiTag.vue'
 import type { Task } from '@core/types/task.type'
diff --git a/@xen-orchestra/web-core/lib/components/tree/TreeItemLabel.vue b/@xen-orchestra/web-core/lib/components/tree/TreeItemLabel.vue
index 4c15b607164..ad4d532443f 100644
--- a/@xen-orchestra/web-core/lib/components/tree/TreeItemLabel.vue
+++ b/@xen-orchestra/web-core/lib/components/tree/TreeItemLabel.vue
@@ -26,7 +26,7 @@
       <div v-else class="h-line" />
       <a v-tooltip="{ selector: '.text' }" :href class="link typo p2-medium" @click="navigate">
         <slot name="icon">
-          <UiIcon :icon color="current" class="icon" />
+          <VtsIcon :icon accent="current" class="icon" />
         </slot>
         <div class="text text-ellipsis">
           <slot />
@@ -39,7 +39,7 @@
 
 <script lang="ts" setup>
 import ButtonIcon from '@core/components/button/ButtonIcon.vue'
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import TreeLine from '@core/components/tree/TreeLine.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN, IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
diff --git a/@xen-orchestra/web-core/lib/components/tree/TreeLoadingItem.vue b/@xen-orchestra/web-core/lib/components/tree/TreeLoadingItem.vue
index 0df9c70f88d..5f71b11089e 100644
--- a/@xen-orchestra/web-core/lib/components/tree/TreeLoadingItem.vue
+++ b/@xen-orchestra/web-core/lib/components/tree/TreeLoadingItem.vue
@@ -6,7 +6,7 @@
         <template v-if="depth > 1">
           <TreeLine v-for="i in depth - 1" :key="i" :right="i === depth - 1" full-height />
         </template>
-        <UiIcon :icon color="current" />
+        <VtsIcon :icon accent="current" />
         <div class="loader">&nbsp;</div>
       </div>
     </div>
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import TreeLine from '@core/components/tree/TreeLine.vue'
 import { IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
diff --git a/@xen-orchestra/web-core/lib/types/color.type.ts b/@xen-orchestra/web-core/lib/types/color.type.ts
index 439f65d419b..f6d20f47d0c 100644
--- a/@xen-orchestra/web-core/lib/types/color.type.ts
+++ b/@xen-orchestra/web-core/lib/types/color.type.ts
@@ -1,5 +1,3 @@
 export type Color = 'normal' | 'success' | 'warning' | 'danger'
 
-export type IconColor = 'current' | 'normal' | 'success' | 'warning' | 'danger'
-
 export type TagColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'
diff --git a/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue b/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue
index 4d9d04ffc54..12193564fcd 100644
--- a/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue
+++ b/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue
@@ -6,12 +6,12 @@
     type="button"
   >
     <UserLogo class="logo" size="medium" />
-    <UiIcon :icon="faAngleDown" class="icon" color="normal" />
+    <VtsIcon :icon="faAngleDown" class="icon" accent="brand" />
   </button>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UserLogo from '@core/components/user/UserLogo.vue'
 import { useContext } from '@core/composables/context.composable'
 import { DisabledContext } from '@core/context'
diff --git a/@xen-orchestra/web/src/components/tree/HostTreeItem.vue b/@xen-orchestra/web/src/components/tree/HostTreeItem.vue
index 20f2fb49e5f..d1745d22b01 100644
--- a/@xen-orchestra/web/src/components/tree/HostTreeItem.vue
+++ b/@xen-orchestra/web/src/components/tree/HostTreeItem.vue
@@ -10,7 +10,7 @@
         />
       </template>
       <template #addons>
-        <UiIcon v-if="isMaster" v-tooltip="$t('master')" :icon="faStar" color="warning" />
+        <VtsIcon v-if="isMaster" v-tooltip="$t('master')" :icon="faStar" accent="warning" />
         <VtsCounter
           v-tooltip="$t('running-vm', runningVmsCount)"
           :value="runningVmsCount"
@@ -36,7 +36,7 @@ import type { HostBranch } from '@/types/tree.type'
 import type { HostState } from '@core/types/object-icon.type'
 import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
 import TreeList from '@core/components/tree/TreeList.vue'