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";
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 ui5-icon. 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.
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 each ui5-icon.
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 ui5-icon should have a tooltip.
Theme:Quartz LightQuartz DarkQuartz High Contrast BlackQuartz High Contrast WhiteBelizeHigh Contrast BlackHigh Contrast White
