How to change standard icons of UI5 elements with CSS

Using UI5 elements like Input or ComboBox we could have the requirement to change the standard icon.

It can be done using Javascript, example:

sap.ui.getCore().attachInit(function (startParams) {    
    ComboBox.addEventDelegate({        
        onAfterRendering: function () {            
            ComboBox.getIcon().setSrc("sap-icon://drill-down");        
        },    
    });
});

Today I want to share instead how achieve the same result using CSS as alternative.

• In my case I created a new app with a SimpleForm with inside the Label and the ComboBox

• Select the Combobox element and assign a new CSS class in the styleClass property (in my case comboCustomIcon)

• Open the application in a new window and inspect the icon we want to change

• The ComboBox standard icon is inside the before pseudo-element, in the content property

• Open now the UI5 Icon Explorer website and choose an icon, in my case I will use the sap-icon//arrow-bottom
• Click on the icon in order to get the Unicode in the right side of the page

• In the StyleSheet section of the App Designer we combine our custom css class with .sapUiIcon::before, then inside the content property we insert the Unicode replacing the x character with backslash

.comboCustomIcon .sapUiIcon::before {    
    content: '\e04e';
}

Here we can see the new icon:

Hope this helps

Happy CSS coding!