Skip to content

How to change standard icons of UI5 elements with CSS

Blog Banner


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) {    
        onAfterRendering: function () {            

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

Working in the App Designer

  • In my case I created a new app with a SimpleForm with inside the Label and the ComboBox
App Designer Structure
  • Select the Combobox element and assign a new CSS class in the styleClass property (in my case comboCustomIcon)
StyleClass Property
  • Open the application in a new window and inspect the icon we want to change
Application DOM Inspect
  • The ComboBox standard icon is inside the before pseudo-element, in the content property
ComboBox CSS 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
UI5 Icon Explorer
  • 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:

ComboBox with the new icon changed with CSS

Hope this helps

Happy CSS coding!