From fc216176333ba8f8d44c2fdab8ec8c8f7cfd1a7a Mon Sep 17 00:00:00 2001
From: "Jose A. Cabaneros" <joseacabaneros@gmail.com>
Date: Thu, 26 Feb 2026 18:08:41 +0100
Subject: [PATCH] fix: use icons in features

---
 packages/x-design-system/demo/src/app.vue     | 18 ++++++------
 .../demo/src/components/badge.vue             | 15 ++++++++++
 .../demo/src/components/button-group.vue      | 17 ++++++++---
 .../demo/src/components/button.vue            | 28 ++++++++++++++-----
 .../demo/src/components/progress-bar.vue      |  4 +--
 .../demo/src/components/wrapper.vue           |  6 ++--
 6 files changed, 64 insertions(+), 24 deletions(-)

diff --git a/packages/x-design-system/demo/src/app.vue b/packages/x-design-system/demo/src/app.vue
index 2ef4f756c5..e61b46a541 100644
--- a/packages/x-design-system/demo/src/app.vue
+++ b/packages/x-design-system/demo/src/app.vue
@@ -1,12 +1,14 @@
 <template>
-  <Badge />
-  <Button />
-  <ButtonGroup />
-  <Highlight />
-  <Icon />
-  <Input />
-  <ProgressBar />
-  <Integration />
+  <div class="xds:flex xds:flex-col xds:gap-40">
+    <Button />
+    <ButtonGroup />
+    <Icon />
+    <Highlight />
+    <Input />
+    <Badge />
+    <ProgressBar />
+    <Integration />
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/x-design-system/demo/src/components/badge.vue b/packages/x-design-system/demo/src/components/badge.vue
index b9c085fec7..f93a3ddbd9 100644
--- a/packages/x-design-system/demo/src/components/badge.vue
+++ b/packages/x-design-system/demo/src/components/badge.vue
@@ -76,6 +76,20 @@
         <span class="xds:attach-bottom-right xds:badge xds:badge-md xds:badge-circle">10</span>
       </span>
     </template>
+    <template #with-icon>
+      <span class="xds:badge">
+        <CuratedIcon class="xds:icon" />
+      </span>
+      <span class="xds:badge xds:badge-sm xds:badge-accent">
+        <CuratedIcon class="xds:icon" />
+      </span>
+      <span class="xds:badge xds:badge-circle">
+        <CuratedIcon class="xds:icon" />
+      </span>
+      <span class="xds:badge xds:badge-circle xds:badge-sm xds:badge-accent">
+        <CuratedIcon class="xds:icon" />
+      </span>
+    </template>
     <template #combinations>
       <span class="xds:badge xds:badge-error xds:badge-sm xds:badge-outlined">
         error sm outlined badge
@@ -100,6 +114,7 @@
 </template>
 
 <script setup lang="ts">
+import CuratedIcon from './icons/curated.svg'
 import Wrapper from './wrapper.vue'
 
 const rows = [
diff --git a/packages/x-design-system/demo/src/components/button-group.vue b/packages/x-design-system/demo/src/components/button-group.vue
index c02670a6c6..651e6c8ba9 100644
--- a/packages/x-design-system/demo/src/components/button-group.vue
+++ b/packages/x-design-system/demo/src/components/button-group.vue
@@ -41,18 +41,27 @@
         <button class="xds:button xds:button-tight xds:button-warning">BUTTON 3</button>
       </div>
       <div class="xds:button-group" :class="{ 'xds:rounded-xl': row === 'rounded' }">
-        <button class="xds:button xds:button-highlight xds:button-circle">+</button>
-        <button class="xds:button xds:button-ghost xds:button-success xds:button-square">+</button>
+        <button class="xds:button xds:button-highlight xds:button-circle">
+          <PlusIcon class="xds:icon" />
+        </button>
+        <button class="xds:button xds:button-ghost xds:button-success xds:button-square">
+          <PlusIcon class="xds:icon" />
+        </button>
       </div>
       <div class="xds:button-group" :class="{ 'xds:rounded-xl': row === 'rounded' }">
-        <button class="xds:button xds:button-highlight xds:button-square">+</button>
-        <button class="xds:button xds:button-ghost xds:button-success xds:button-square">+</button>
+        <button class="xds:button xds:button-highlight xds:button-square">
+          <PlusIcon class="xds:icon" />
+        </button>
+        <button class="xds:button xds:button-ghost xds:button-success xds:button-square">
+          <PlusIcon class="xds:icon" />
+        </button>
       </div>
     </template>
   </Wrapper>
 </template>
 
 <script setup lang="ts">
+import PlusIcon from './icons/plus.svg'
 import Wrapper from './wrapper.vue'
 
 const rows = ['default', 'rounded']
diff --git a/packages/x-design-system/demo/src/components/button.vue b/packages/x-design-system/demo/src/components/button.vue
index a8b1494fda..47e45b0516 100644
--- a/packages/x-design-system/demo/src/components/button.vue
+++ b/packages/x-design-system/demo/src/components/button.vue
@@ -10,8 +10,12 @@
       <button class="xds:button xds:button-xl">xl badge</button>
     </template>
     <template #layout>
-      <button class="xds:button xds:button-circle">+</button>
-      <button class="xds:button xds:button-square">+</button>
+      <button class="xds:button xds:button-circle">
+        <CuratedIcon class="xds:icon" />
+      </button>
+      <button class="xds:button xds:button-square">
+        <CuratedIcon class="xds:icon" />
+      </button>
     </template>
     <template #color>
       <button class="xds:button">button</button>
@@ -143,20 +147,30 @@
       </button>
     </template>
     <template #combinations>
-      <button class="xds:button xds:button-lead xds:button-sm">lead sm button</button>
+      <button class="xds:button xds:button-lead xds:button-sm">
+        <CuratedIcon class="xds:icon" />
+        lead sm button
+      </button>
       <button class="xds:button xds:button-outlined xds:button-square xds:button-lg xds:selected">
-        +
+        <CuratedIcon class="xds:icon" />
       </button>
       <button class="xds:button xds:button-auxiliary xds:button-outlined xds:button-circle">
-        -
+        <CuratedIcon class="xds:icon" />
+      </button>
+      <button class="xds:button xds:button-accent xds:button-tight">
+        <CuratedIcon class="xds:icon" />
+        accent tight button
+      </button>
+      <button class="xds:button xds:button-warning xds:button-ghost">
+        <CuratedIcon class="xds:icon" />
+        warning ghost button
       </button>
-      <button class="xds:button xds:button-accent xds:button-tight">accent tight button</button>
-      <button class="xds:button xds:button-warning xds:button-ghost">warning ghost button</button>
     </template>
   </Wrapper>
 </template>
 
 <script setup lang="ts">
+import CuratedIcon from './icons/curated.svg'
 import Wrapper from './wrapper.vue'
 
 const rows = [
diff --git a/packages/x-design-system/demo/src/components/progress-bar.vue b/packages/x-design-system/demo/src/components/progress-bar.vue
index 38e1eacd5d..0914d6ee19 100644
--- a/packages/x-design-system/demo/src/components/progress-bar.vue
+++ b/packages/x-design-system/demo/src/components/progress-bar.vue
@@ -1,5 +1,5 @@
 <template>
-  <Wrapper feature="ProgressBar" :rows="rows">
+  <Wrapper feature="Progress Bar" :rows="rows">
     <template #default>
       <span>default</span>
       <div class="xds:progress-bar xds:w-320">
@@ -8,7 +8,7 @@
     </template>
     <template #size>
       <div class="xds:flex xds:gap-8 xds:items-center xds:mr-16">
-        <span>sm</span>
+        <span>md</span>
         <div class="xds:progress-bar xds:progress-bar-sm xds:w-320">
           <div class="xds:progress-bar-fill xds:w-[30%]" />
         </div>
diff --git a/packages/x-design-system/demo/src/components/wrapper.vue b/packages/x-design-system/demo/src/components/wrapper.vue
index 47704f1c8a..6461851cf5 100644
--- a/packages/x-design-system/demo/src/components/wrapper.vue
+++ b/packages/x-design-system/demo/src/components/wrapper.vue
@@ -1,12 +1,12 @@
 <template>
-  <table class="xds:min-w-full xds:mb-16">
+  <table class="xds:min-w-full xds:border xds:border-neutral-50">
     <thead class="xds:bg-neutral-25">
       <tr>
-        <th colspan="2" class="xds:p-8">{{ feature }}</th>
+        <th colspan="2" class="xds:p-12 xds:text-xl">{{ feature }}</th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="row in rows" :key="row">
+      <tr v-for="row in rows" :key="row" class="xds:not-last:border-b xds:border-b-neutral-10">
         <td class="xds:w-192 xds:p-12 xds:text-right">{{ row }}</td>
         <td
           class="xds:p-12 xds:flex xds:items-center xds:flex-wrap xds:whitespace-nowrap xds:gap-8"