fix(ui5-select): display the selected option's icon (#3348)

Fixes: #3344

Author: nnaydenow

packages/main/src/Select.hbs

@@ -4,6 +4,14 @@
 	id="{{_id}}-select"
 	@click="{{_onclick}}"
 >
+	{{#if selectedOptionIcon}}
+		<ui5-icon
+			aria-hidden="true"
+			class="ui5-select-option-icon"
+			name="{{selectedOptionIcon}}"
+			dir="{{effectiveDir}}"
+		></ui5-icon>
+	{{/if}}
 	<div class="ui5-select-label-root"
 		data-sap-focus-ref
 		tabindex="{{tabIndex}}"

packages/main/src/Select.js

@@ -709,6 +709,10 @@ class Select extends UI5Element {
 		}
 	}
 
+	get selectedOptionIcon() {
+		return this.selectedOption.icon;
+	}
+
 	async _getPopover() {
 		const staticAreaItem = await this.getStaticAreaItemDomRef();
 		return staticAreaItem.querySelector("[ui5-popover]");

packages/main/src/themes/Select.css

@@ -27,11 +27,22 @@
 	font-weight: normal;
 }
 
+.ui5-select-option-icon {
+	padding-left: 0.5rem;
+	color: var(--sapField_TextColor);
+	align-self: center;
+}
+
 :host [dir="rtl"].ui5-select-root .ui5-select-label-root {
 	padding-left: 0;
 	padding-right: 0.5rem;
 }
 
+:host [dir="rtl"] .ui5-select-option-icon {
+	padding-right: 0.5rem;
+	padding-left: 0;
+}
+
 :host(:not([disabled])) {
 	cursor: pointer;
 }