feat(ui5-icon): add fontIcon slot for font-based icon libraries

packages/main/cypress/specs/Icon.cy.tsx

@@ -297,7 +297,7 @@ describe("Icon general interaction", () => {
         cy.get("[ui5-icon][mode='Interactive']").then($icon => {
             const icon = $icon[0] as any;
             const accessibilityInfo = icon.accessibilityInfo;
-            
+
             // For Interactive mode, accessibilityInfo should have role, type and description
             expect(accessibilityInfo).to.not.be.undefined;
             expect(accessibilityInfo.role).to.equal("button");
@@ -317,7 +317,7 @@ describe("Icon general interaction", () => {
         cy.get("[ui5-icon][mode='Decorative']").then($icon => {
             const icon = $icon[0] as any;
             const accessibilityInfo = icon.accessibilityInfo;
-            
+
             // For Decorative mode, accessibilityInfo should return an empty object
             expect(accessibilityInfo).to.deep.equal({});
         });
@@ -334,7 +334,7 @@ describe("Icon general interaction", () => {
         cy.get("[ui5-icon][mode='Image']").then($icon => {
             const icon = $icon[0] as any;
             const accessibilityInfo = icon.accessibilityInfo;
-            
+
             // For Image mode, accessibilityInfo should have role, type and description
             expect(accessibilityInfo).to.not.be.undefined;
             expect(accessibilityInfo.role).to.equal("img");
@@ -343,3 +343,143 @@ describe("Icon general interaction", () => {
         });
     });
 });
+
+describe("Icon fontIcon slot", () => {
+    it("renders a span root instead of svg when fontIcon slot is used", () => {
+        cy.mount(
+            <Icon>
+                <span slot="fontIcon">★</span>
+            </Icon>
+        );
+
+        cy.get("[ui5-icon]").shadow().find("span.ui5-icon-root").should("exist");
+        cy.get("[ui5-icon]").shadow().find("svg").should("not.exist");
+    });
+
+    it("Decorative mode: span root has role=presentation and aria-hidden=true", () => {
+        cy.mount(
+            <Icon>
+                <span slot="fontIcon">★</span>
+            </Icon>
+        );
+
+        cy.get("[ui5-icon]").shadow().find("span.ui5-icon-root")
+            .should("have.attr", "role", "presentation")
+            .should("have.attr", "aria-hidden", "true");
+    });
+
+    it("Image mode: span root has role=img and aria-label", () => {
+        cy.mount(
+            <Icon mode="Image" accessibleName="Star">
+                <span slot="fontIcon">★</span>
+            </Icon>
+        );
+
+        cy.get("[ui5-icon]").shadow().find("span.ui5-icon-root")
+            .should("have.attr", "role", "img")
+            .should("have.attr", "aria-label", "Star")
+            .should("not.have.attr", "aria-hidden");
+    });
+
+    it("Interactive mode: span root has role=button and tabindex=0", () => {
+        cy.mount(
+            <Icon mode="Interactive" accessibleName="Add">
+                <span slot="fontIcon">＋</span>
+            </Icon>
+        );
+
+        cy.get("[ui5-icon]").shadow().find("span.ui5-icon-root")
+            .should("have.attr", "role", "button")
+            .should("have.attr", "tabindex", "0")
+            .should("have.attr", "aria-label", "Add");
+    });
+
+    it("Interactive mode: fires ui5-click on mouse click", () => {
+        cy.mount(
+            <Icon mode="Interactive" accessibleName="Add">
+                <span slot="fontIcon">＋</span>
+            </Icon>
+        );
+
+        cy.get("[ui5-icon]").then($icon => {
+            $icon[0].addEventListener("ui5-click", cy.stub().as("ui5Click"));
+        });
+
+        cy.get("[ui5-icon]").realClick();
+        cy.get("@ui5Click").should("have.been.calledOnce");
+    });
+
+    it("Interactive mode: fires ui5-click on Enter key", () => {
+        cy.mount(
+            <Icon mode="Interactive" accessibleName="Add">
+                <span slot="fontIcon">＋</span>
+            </Icon>
+        );
+
+        cy.get("[ui5-icon]").then($icon => {
+            $icon[0].addEventListener("ui5-click", cy.stub().as("ui5Click"));
+        });
+
+        cy.get("[ui5-icon]").shadow().find("span.ui5-icon-root").focus();
+        cy.realPress("Enter");
+        cy.get("@ui5Click").should("have.been.calledOnce");
+    });
+
+    it("Interactive mode: fires ui5-click on Space key", () => {
+        cy.mount(
+            <Icon mode="Interactive" accessibleName="Add">
+                <span slot="fontIcon">＋</span>
+            </Icon>
+        );
+
+        cy.get("[ui5-icon]").then($icon => {
+            $icon[0].addEventListener("ui5-click", cy.stub().as("ui5Click"));
+        });
+
+        cy.get("[ui5-icon]").shadow().find("span.ui5-icon-root").focus();
+        cy.realPress("Space");
+        cy.get("@ui5Click").should("have.been.calledOnce");
+    });
+
+    it("Decorative mode: does not fire ui5-click on click", () => {
+        cy.mount(
+            <Icon>
+                <span slot="fontIcon">★</span>
+            </Icon>
+        );
+
+        cy.get("[ui5-icon]").then($icon => {
+            $icon[0].addEventListener("ui5-click", cy.stub().as("ui5Click"));
+        });
+
+        cy.get("[ui5-icon]").realClick();
+        cy.get("@ui5Click").should("not.have.been.called");
+    });
+
+    it("no accessible-name: aria-label is not set", () => {
+        cy.mount(
+            <Icon mode="Image">
+                <span slot="fontIcon">★</span>
+            </Icon>
+        );
+
+        cy.get("[ui5-icon]").shadow().find("span.ui5-icon-root")
+            .should("not.have.attr", "aria-label");
+    });
+
+    it("accessible-name takes effect when set", () => {
+        cy.mount(
+            <Icon mode="Image" accessibleName="Initial">
+                <span slot="fontIcon">★</span>
+            </Icon>
+        );
+
+        cy.get("[ui5-icon]").shadow().find("span.ui5-icon-root")
+            .should("have.attr", "aria-label", "Initial");
+
+        cy.get("[ui5-icon]").invoke("prop", "accessibleName", "Updated");
+
+        cy.get("[ui5-icon]").shadow().find("span.ui5-icon-root")
+            .should("have.attr", "aria-label", "Updated");
+    });
+});

packages/main/src/Icon.ts

@@ -3,7 +3,9 @@ import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { IconData, UnsafeIconData } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 import { getIconData, getIconDataSync } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -194,6 +196,25 @@ class Icon extends UI5Element implements IIcon {
 	@property()
 	mode: `${IconMode}` = "Decorative";
 
+	/**
+	 * Defines the font icon to be used as an icon.
+	 * Intended for font-based icon libraries where
+	 * the application loads the font and provides a slotted element with the unicode character.
+	 * When this slot is used, the component renders a `<span>` instead of an `<svg>`.
+	 * Accessibility is fully delegated to the application — set `accessible-name` and `mode` explicitly.
+	 *
+	 * **Example:**
+	 * ```html
+	 * <ui5-icon mode="Image" accessible-name="Home">
+	 *   <i class="fa fa-home" slot="fontIcon"></i>
+	 * </ui5-icon>
+	 * ```
+	 * @public
+	 * @since 2.23.0
+	 */
+	@slot({ type: HTMLElement })
+	fontIcon!: Slot<HTMLElement>;
+
 	/**
 	 * @private
 	 */
@@ -288,6 +309,16 @@ class Icon extends UI5Element implements IIcon {
 	}
 
 	async onBeforeRendering() {
+		if (this.fontIcon.length) {
+			// Font-based icon via slot — skip registry, accessibility is app's responsibility
+			if (!this.accessibleName) {
+				this.effectiveAccessibleName = undefined;
+			} else {
+				this.effectiveAccessibleName = this.accessibleName;
+			}
+			return;
+		}
+
 		const name = this.name;
 		if (!name) {
 			return;
@@ -344,6 +375,10 @@ class Icon extends UI5Element implements IIcon {
 		}
 	}
 
+	get hasFontIcon() {
+		return this.fontIcon.length > 0;
+	}
+
 	get hasIconTooltip() {
 		return this.showTooltip && this.effectiveAccessibleName;
 	}

packages/main/src/IconTemplate.tsx

@@ -1,6 +1,24 @@
 import type Icon from "./Icon.js";
 
 export default function IconTemplate(this: Icon) {
+	if (this.hasFontIcon) {
+		return (
+			<span
+				class="ui5-icon-root"
+				part="root"
+				tabindex={this._tabIndex}
+				role={this.effectiveAccessibleRole}
+				aria-label={this.effectiveAccessibleName}
+				aria-hidden={this.effectiveAriaHidden}
+				onKeyDown={this._onkeydown}
+				onKeyUp={this._onkeyup}
+				onClick={this._onclick}
+			>
+				<slot name="fontIcon"></slot>
+			</span>
+		);
+	}
+
 	return (
 		<svg
 			class="ui5-icon-root"

packages/main/src/themes/Icon.css

@@ -20,6 +20,7 @@
 	color: var(--sapContent_IconColor);
 	fill: currentColor;
 	outline: none;
+	container-type: size;
 }
 
 :host([design="Contrast"]) {
@@ -62,6 +63,11 @@
 	width: 100%;
 	outline: none;
 	vertical-align: top;
+	box-sizing: border-box;
+	align-items: center;
+	justify-content: center;
+	font-size: min(100cqw, 100cqh);
+	line-height: 1;
 }