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 an interactive element that can be focused and clicked.
Usage
1. Get familiar with the icons collections. Before displaying an icon, you need to explore the icons collections to find and import the desired icon. Currently there are 3 icons collection, available as 3 npm packages:
@ui5/webcomponents-icons represents the "SAP-icons" collection and includes the following icons.
@ui5/webcomponents-icons-tnt represents the "tnt" collection and includes the following icons.
@ui5/webcomponents-icons-icons-business-suite represents the "business-suite" collection and includes the following icons.
2. After exploring the icons collections, add one or more of the packages as dependencies to your project. npm i @ui5/webcomponents-icons npm i @ui5/webcomponents-icons-tnt npm i @ui5/webcomponents-icons-business-suite
3. Then, import the desired icon. import "@ui5/{package_name}/dist/{icon_name}.js";
For Example:
For the standard "SAP-icons" icon collection, import an icon from the @ui5/webcomponents-icons package: import "@ui5/webcomponents-icons/dist/employee.js";
For the "tnt" (SAP Fiori Tools) icon collection, import an icon from the @ui5/webcomponents-icons-tnt package: import "@ui5/webcomponents-icons-tnt/dist/antenna.js";
For the "business-suite" (SAP Business Suite) icon collection, import an icon from the @ui5/webcomponents-icons-business-suite package: import "@ui5/webcomponents-icons-business-suite/dist/ab-testing.js";
4. Display the icon using the ui5-icon web component. Set the icon collection ("SAP-icons", "tnt" or "business-suite" - "SAP-icons" is the default icon collection and can be skipped) and the icon name to the name property.
[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
design
IconDesign
"Default"
Defines the component semantic design.
The available values are:
Contrast
Critical
Default
Information
Negative
Neutral
NonInteractive
Positive
since v1.9.2
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 SAP Icons, SAP Fiori Tools and SAP Business Suite collections.
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'.
Note: To use the SAP Business Suite icons, you need to set the business-suite prefix in front of the icon's name.
Example: name='business-suite/3d', name='business-suite/1x2-grid-layout', name='business-suite/4x4-grid-layout'.
showTooltip
show-tooltip
boolean
false
Defines whether the component should have a tooltip.
Note: The tooltip text should be provided via the accessible-name property.
Theme:Morning Horizon (Light)Evening Horizon (Dark)Horizon High Contrast BlackHorizon High Contrast WhiteQuartz LightQuartz DarkQuartz High Contrast BlackQuartz High Contrast White
