Icon
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​
- 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.
- 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
- 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";
- 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 thename
property.
<ui5-icon name="employee"></ui5-icon>
<ui5-icon name="tnt/antenna"></ui5-icon>
<ui5-icon name="business-suite/ab-testing"></ui5-icon>
Keyboard Handling​
- [Space] / [Enter] or [Return] - Fires the
click
event if theinteractive
property is set to true. - [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.
ES6 Module Import​
import "@ui5/webcomponents/dist/Icon.js";
Basic Sample​
Properties​
design​
interactive​
name​
accessibleName​
showTooltip​
accessibleRole​
Slots​
No slots available for this component.
Events​
No events available for this component.
Methods​
No methods available for this component.
CSS Parts​
More Samples​
Design​
The Icon supports multiple designs.
Custom Styling​
The Icon allows style customization via pure CSS, applied on the tag.
Interactive​
The Icon can be interactive - clickable and focusable.
SAP Fiori Tools Icons​
The SAP Fiori Tools Icons are available in the @ui5/webcomponents-icons-tnt package.
SAP Business Suite Icons​
The SAP Business Suite Icons are available in the @ui5/webcomponents-icons-business-suite package.