Introduction
With the latest version of the UI Theme Designer (…), a brand-new Icon Preview page has been introduced, making it easier than ever to theme icon controls.
The Icon control is a fundamental UI element in SAPUI5 applications: it displays small, meaningful symbols that help users navigate the interface, understand actions, and identify the purpose of buttons, statuses, and interactive elements at a glance. Whether it’s a simple navigation arrow, a status indicator, or an action button icon, consistent theming ensures that these visual cues integrate smoothly with the overall application design.
The new preview page allows designers and developers to efficiently adjust and preview icon colors, states, and visual behaviors — all within a single, streamlined environment.
Theming the Icon Control
To theme the Icon control, start by opening your custom theme in the UI Theme Designer. Once the theme is loaded, add the new Icon Preview page to your preview section. Navigate to SAPUI5 Control Previews and simply activate the checkbox “Icon”.
Select the checkbox “Icon” to add your preview page
After opening the preview, you’ll get an overview of a wide range of icons — neatly categorized by color, state, and type.
This makes it easy to understand how each icon behaves within different UI scenarios.
If you want to adjust the styling, switch to Expert Mode. Click on the tag icon and select the “Icon” tag.
Once selected, the theming parameters relevant for icons appear.
Inside the expert mode select the tag “Icon” to display all related parameters
The most important parameters for customizing icon appearance are:
sapContent_IconColor – the default color of iconssapContent_ContrastIconColor – the alternative icon color used for improved contrastsapContent_NonInteractiveIconColor – the color used for non-interactive icons
With these parameters, you can now fine-tune the icon styling directly within the UI Theme Designer’s Expert Mode.
This gives you full control to match your icons perfectly to your application’s look and feel.
What do you think?
How do you like the new theming options for icons?
Share your thoughts with us in the comments — we’re looking forward to your feedback!
IntroductionWith the latest version of the UI Theme Designer (…), a brand-new Icon Preview page has been introduced, making it easier than ever to theme icon controls.The Icon control is a fundamental UI element in SAPUI5 applications: it displays small, meaningful symbols that help users navigate the interface, understand actions, and identify the purpose of buttons, statuses, and interactive elements at a glance. Whether it’s a simple navigation arrow, a status indicator, or an action button icon, consistent theming ensures that these visual cues integrate smoothly with the overall application design.The new preview page allows designers and developers to efficiently adjust and preview icon colors, states, and visual behaviors — all within a single, streamlined environment.Theming the Icon ControlTo theme the Icon control, start by opening your custom theme in the UI Theme Designer. Once the theme is loaded, add the new Icon Preview page to your preview section. Navigate to SAPUI5 Control Previews and simply activate the checkbox “Icon”. Select the checkbox “Icon” to add your preview pageAfter opening the preview, you’ll get an overview of a wide range of icons — neatly categorized by color, state, and type.This makes it easy to understand how each icon behaves within different UI scenarios.If you want to adjust the styling, switch to Expert Mode. Click on the tag icon and select the “Icon” tag. Once selected, the theming parameters relevant for icons appear. Inside the expert mode select the tag “Icon” to display all related parametersThe most important parameters for customizing icon appearance are:sapContent_IconColor – the default color of iconssapContent_ContrastIconColor – the alternative icon color used for improved contrastsapContent_NonInteractiveIconColor – the color used for non-interactive iconsWith these parameters, you can now fine-tune the icon styling directly within the UI Theme Designer’s Expert Mode.This gives you full control to match your icons perfectly to your application’s look and feel.What do you think?How do you like the new theming options for icons?Share your thoughts with us in the comments — we’re looking forward to your feedback! Read More Technology Blog Posts by SAP articles
#SAP
#SAPTechnologyblog
