The ui5-icon component represents an SVG icon. There are two main scenarios how the ui5-icon component is used: as a purely decorative element; or as a visually appealing clickable area in the form of an icon button.
A large set of built-in icons is available and they can be used by setting the name property on the ui5-icon. But before using an icon, you need to import the desired icon.
For the standard icon collection, you have to import an icon from the @ui5/webcomponents-icons package: import "@ui5/webcomponents-icons/dist/employee.js";
For the SAP Fiori Tools icon collection (supported since 1.0.0-rc.10), you have to import an icon from the @ui5/webcomponents-icons-tnt package: import "@ui5/webcomponents-icons-tnt/dist/antenna.js";
Keyboard Handling
[SPACE, ENTER, RETURN] - Fires the click event if the interactive property is set to true.
[SHIFT] - If [SPACE] or [ENTER],[RETURN] is pressed, pressing [SHIFT] releases the ui5-icon without triggering the click event.
ES6 Module Import
import "@ui5/webcomponents/dist/Icon.js";
Properties/Attributes
You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.
Name
Type
Default Value
Description
accessibleName
accessible-name
string
""
Defines the text alternative of the component. If not provided a default text alternative will be set, if present.
Note: Every icon should have a text alternative in order to calculate its accessible name.
accessibleRole
accessible-role
string
""
Defines the accessibility role of the component.
since v1.1.0
interactive
boolean
false
Defines if the icon is interactive (focusable and pressable)
since v1.0.0-rc.8
name
string
""
Defines the unique identifier (icon name) of the component.
To browse all available icons, see the Icon Explorer.
Example: name='add', name='delete', name='employee'.
Note: To use the SAP Fiori Tools icons, you need to set the tnt prefix in front of the icon's name.
Example: name='tnt/antenna', name='tnt/actor', name='tnt/api'.
showTooltip
show-tooltip
boolean
false
Defines whether the component should have a tooltip.
Theme:Quartz LightQuartz DarkQuartz High Contrast BlackQuartz High Contrast WhiteBelizeHigh Contrast BlackHigh Contrast WhiteHorizon