feat(ui5-li, ui5-tree-item): introduce new slot customIcon

Author: dobrinyonkov

packages/main/src/ListItem.ts

@@ -257,6 +257,19 @@ abstract class ListItem extends ListItemBase {
 	@slot()
 	deleteButton!: Array<HTMLElement>;
 
+	/**
+	 * Defines the icon, displayed in the beginning or end of the list item.
+	 * If a custom icon is set, it will be rendered in place of the standard icon defined in the <code>icon</code> property.
+	 * <br><br>
+	 * @type {sap.ui.webc.main.IIcon}
+	 * @name sap.ui.webc.main.ListItem.prototype.customIcon
+	 * @since 1.18.0
+	 * @slot
+	 * @public
+	 */
+	@slot()
+	customIcon!: Array<HTMLElement>;
+
 	deactivateByKey: (e: KeyboardEvent) => void;
 	deactivate: () => void;
 	_ontouchstart: PassiveEventListenerObject;
@@ -498,6 +511,10 @@ abstract class ListItem extends ListItemBase {
 		return !!this.deleteButton.length;
 	}
 
+	get hasCustomIconSlot() {
+		return !!this.customIcon.length;
+	}
+
 	get _accessibleNameRef(): string {
 		if ((this as IAccessibleListItem).accessibleName) {
 			// accessibleName is set - return labels excluding content

packages/main/src/StandardListItem.hbs

@@ -39,12 +39,20 @@
 
 {{#*inline "iconBegin"}}
 	{{#if displayIconBegin}}
-		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon" accessible-role="presentation" aria-hidden="true"></ui5-icon>
+		{{#if hasCustomIconSlot}}
+			<slot name="customIcon"></slot>
+		{{else}}
+			<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon" accessible-role="presentation" aria-hidden="true"></ui5-icon>
+		{{/if}}
 	{{/if}}
 {{/inline}}
 
 {{#*inline "iconEnd"}}
 	{{#if displayIconEnd}}
-		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon" accessible-role="presentation" aria-hidden="true"></ui5-icon>
+		{{#if hasCustomIconSlot}}
+			<slot name="customIcon"></slot>
+		{{else}}
+			<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon" accessible-role="presentation" aria-hidden="true"></ui5-icon>
+		{{/if}}
 	{{/if}}
 {{/inline}}

packages/main/src/TreeItemBase.hbs

@@ -28,7 +28,9 @@
 {{#*inline "imageBegin"}}{{/inline}}
 
 {{#*inline "iconBegin"}}
-	{{#if icon}}
+	{{#if hasCustomIconSlot}}
+		<slot name="customIcon"></slot>
+	{{else if icon}}
 		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon"></ui5-icon>
 	{{/if}}
 {{/inline}}

packages/main/src/themes/ListItem.css

@@ -171,6 +171,7 @@
 	object-fit: contain;
 }
 
+::slotted([ui5-icon][slot="customIcon"]),
 .ui5-li-icon {
 	min-width: var(--_ui5_list_item_icon_size);
 	min-height: var(--_ui5_list_item_icon_size);

packages/main/src/themes/TreeItem.css

@@ -9,6 +9,7 @@
 	min-width: 0;
 }
 
+:host([_minimal]) ::slotted([ui5-icon][slot="customIcon"]),
 :host([_minimal]) .ui5-li-icon {
 	padding: 0;
 }

packages/playground/_stories/main/Tree/Tree.stories.ts

@@ -96,8 +96,8 @@ export const DynamicContent: StoryFn = () => html`
     </script>
 `;
 
-export const TreeWithCustomItems = Template.bind({});
-TreeWithCustomItems.args = {
+export const WithCustomItems = Template.bind({});
+WithCustomItems.args = {
     header: `
 	<div slot="header">
 		<ui5-title>Tree with custom items</ui5-title>
@@ -132,3 +132,15 @@ TreeWithCustomItems.args = {
 		</ui5-tree-item-custom>
 	</ui5-tree-item-custom>`,
 };
+
+
+export const WithCustomIcon = Template.bind({});
+WithCustomIcon.args = {
+    default: `
+    <ui5-tree-item text="Tree 1" expanded>
+        <ui5-icon slot="customIcon" name="paste" accessible-name="Paste" show-tooltip></ui5-icon>
+        <ui5-tree-item text="Tree 1.2">
+            <ui5-icon slot="customIcon" name="paste" accessible-name="Paste" show-tooltip></ui5-icon>
+        </ui5-tree-item>
+    </ui5-tree-item>`
+};