Icons play a vital role in building intuitive and visually appealing user interfaces. In SAP-UI5, icon fonts provide a scalable, lightweight, and easy-to-use solution for incorporating icons throughout your application. This article explains how to work with UI5 Icon Fonts, covering how to use, customize, and optimize icons in your SAP-UI5 applications.
UI5 Icon Fonts are collections of vector icons packaged as fonts. Unlike image-based icons, icon fonts scale seamlessly at any size and resolution without losing quality. They reduce HTTP requests because all icons are bundled in a single font file, which improves performance.
SAP-UI5 provides an extensive Icon Pool, a standardized set of icons accessible through the sap.ui.core.IconPool API or via UI5 controls like sap.ui.core.Icon or sap.m.Button.
sap.ui.core.Icon ControlThe simplest way to display an icon is by using the Icon control and specifying the icon name from the UI5 icon pool.
<Icon src="sap-icon://accept" size="2rem" color="#107E3E" />
In JavaScript:
new sap.ui.core.Icon({
src: "sap-icon://employee",
size: "1.5rem",
color: "#0A6ED1"
}).placeAt("content");
sap-icon:// followed by the icon name, e.g., "sap-icon://action".SAP maintains a comprehensive catalog of available icons in the UI5 Icon Explorer, accessible here:
https://sap.github.io/ui5-webcomponents/playground/icons/
Or via the SAPUI5 demo kit’s Icon Explorer:
You can specify icon size in CSS units (px, rem, em):
<Icon src="sap-icon://alarm" size="3rem" />
Set the icon color by applying the color property:
<Icon src="sap-icon://alert" color="red" />
Or via CSS:
.myIcon {
color: #ff0000;
}
You can apply CSS transformations to rotate or flip icons:
.rotatedIcon {
transform: rotate(45deg);
}
Sometimes business applications require branding or unique icons beyond the standard UI5 set. SAP-UI5 allows integration of custom icon fonts:
.woff, .ttf, .svg) to your project.@font-face {
font-family: 'CustomIcons';
src: url('fonts/custom-icons.woff2') format('woff2');
}
sap.ui.core.IconPool.addIcon("customIconName", "customFontFamily", "customIcons", "e001");
<Icon src="customFontFamily://customIconName" />
Working with UI5 Icon Fonts enables SAP-UI5 developers to create visually rich, responsive, and scalable user interfaces with minimal overhead. The built-in UI5 Icon Pool provides a vast range of icons, while support for custom icon fonts ensures flexibility for unique design requirements.
By mastering icon fonts in SAP-UI5, you can enhance your application's usability and aesthetic appeal while keeping performance optimal.