From 21bb082ab0bb2f5a20c2e7f5e65dac8a190f1941 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <nnaydenow.work@gmail.com>
Date: Thu, 4 Dec 2025 11:06:23 +0200
Subject: [PATCH] wip(ui5-product-switch-item): add icon part

---
 .../fiori/src/ProductSwitchItemTemplate.tsx   | 25 ++++++++++---------
 .../fiori/src/themes/ProductSwitchItem.css    | 14 ++++++-----
 packages/fiori/test/pages/ProductSwitch.html  | 11 ++++++--
 3 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/packages/fiori/src/ProductSwitchItemTemplate.tsx b/packages/fiori/src/ProductSwitchItemTemplate.tsx
index 0b6381b107b6..12e896644311 100644
--- a/packages/fiori/src/ProductSwitchItemTemplate.tsx
+++ b/packages/fiori/src/ProductSwitchItemTemplate.tsx
@@ -17,7 +17,7 @@ export default function ProductSwitchItemTemplate(this: ProductSwitchItem) {
 					href={this.targetSrc}
 					target={this._effectiveTarget}
 				>
-					{ item.call(this) }
+					{item.call(this)}
 				</a>
 				:
 				<div
@@ -31,7 +31,7 @@ export default function ProductSwitchItemTemplate(this: ProductSwitchItem) {
 					onKeyUp={this._onkeyup}
 					tabindex={this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined}
 				>
-					{ item.call(this) }
+					{item.call(this)}
 				</div>
 			}
 		</>
@@ -41,17 +41,18 @@ export default function ProductSwitchItemTemplate(this: ProductSwitchItem) {
 function item(this: ProductSwitchItem) {
 	return (
 		<>
-			{this.image && this.image.length > 0 ? (
-				<span class="ui5-product-switch-item-image-placeholder">
+			<span class="ui5-product-switch-item-image-placeholder">
+				{this.image && this.image.length > 0 ? (
 					<slot name="image"></slot>
-				</span>
-			) : (
-				this.icon &&
-				<Icon
-					class="ui5-product-switch-item-icon"
-					name={this.icon}
-				/>
-			)}
+				) : (
+					this.icon &&
+					<Icon
+						part="icon"
+						class="ui5-product-switch-item-icon"
+						name={this.icon}
+					/>
+				)}
+			</span>
 
 			<span class="ui5-product-switch-item-text-content">
 				{this.titleText &&
diff --git a/packages/fiori/src/themes/ProductSwitchItem.css b/packages/fiori/src/themes/ProductSwitchItem.css
index 40c76744e751..9535d919c8c4 100644
--- a/packages/fiori/src/themes/ProductSwitchItem.css
+++ b/packages/fiori/src/themes/ProductSwitchItem.css
@@ -63,10 +63,8 @@
 }
 
 .ui5-product-switch-item-root .ui5-product-switch-item-icon {
-	width: 3rem;
-	height: 3rem;
-	padding: .75rem;
-	margin-bottom: .5rem;
+	width: 1.5rem;
+	height: 1.5rem;
 	box-sizing: border-box;
 	color: var(--sapContent_IconColor);
 	pointer-events: none;
@@ -76,6 +74,10 @@
 	width: 3rem;
 	height: 3rem;
 	margin-bottom: .5rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
 }
 
 .ui5-product-switch-item-root .ui5-product-switch-item-text-content {
@@ -133,9 +135,9 @@
 	}
 
 	.ui5-product-switch-item-root .ui5-product-switch-item-icon {
-		padding: .875rem;
+		width: 1.25rem;
+		height: 1.25rem;
 		color: var(--sapContent_NonInteractiveIconColor);
-		margin: 0 .75rem 0 0;
 	}
 
 	.ui5-product-switch-item-root .ui5-product-switch-item-image-placeholder {
diff --git a/packages/fiori/test/pages/ProductSwitch.html b/packages/fiori/test/pages/ProductSwitch.html
index 6cf227602e05..00a515347a21 100644
--- a/packages/fiori/test/pages/ProductSwitch.html
+++ b/packages/fiori/test/pages/ProductSwitch.html
@@ -14,6 +14,13 @@
 
 
 	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+	<style>
+		.custom-icon::part(icon) {
+			width: 2.5rem;
+			height: 2.5rem;
+			color: red;
+		}
+	</style>
 
 
 	<script>
@@ -32,7 +39,7 @@
 		</ui5-product-switch-item>
 		<ui5-product-switch-item title-text="Analytics Cloud" subtitle-text="Analytics Cloud" icon="business-objects-experience"></ui5-product-switch-item>
 		<ui5-product-switch-item title-text="Catalog" subtitle-text="Ariba" icon="contacts"></ui5-product-switch-item>
-		<ui5-product-switch-item title-text="Guided Buying" icon="credit-card"></ui5-product-switch-item>
+		<ui5-product-switch-item class="custom-icon" title-text="Guided Buying" icon="credit-card"></ui5-product-switch-item>
 	</ui5-product-switch>
 
 	<ui5-product-switch id="productSwitchFourColumn">
@@ -40,7 +47,7 @@
 		<ui5-product-switch-item title-text="Analytics Cloud" subtitle-text="Analytics Cloud" icon="business-objects-experience"></ui5-product-switch-item>
 		<ui5-product-switch-item title-text="Catalog" subtitle-text="Ariba" icon="contacts"></ui5-product-switch-item>
 		<ui5-product-switch-item title-text="Guided Buying" icon="credit-card"></ui5-product-switch-item>
-		<ui5-product-switch-item title-text="Strategic Procurement" icon="cart-3"></ui5-product-switch-item>
+		<ui5-product-switch-item class="custom-icon" title-text="Strategic Procurement" icon="cart-3"></ui5-product-switch-item>
 		<ui5-product-switch-item title-text="Travel & Expense" subtitle-text="Concur" icon="flight"></ui5-product-switch-item>
 		<ui5-product-switch-item title-text="Vendor Management" subtitle-text="Fieldglass" icon="shipping-status"></ui5-product-switch-item>
 		<ui5-product-switch-item title-text="Human Capital Management" icon="customer"></ui5-product-switch-item>