Using Icons
This section explains how to load and use icons in your UI5 Web Components projects.
One of the most commonly used UI5 Web Components is ui5-icon
. Additionally, several UI5 Web Components have an icon
property that expects an icon name as a value.
Icon Collections
The UI5 Web Components project currently offers 3 icon collections, provided as NPM packages:
Project | NPM Package | Description | Icons list |
---|---|---|---|
icons |
UI5 Web Components - Icons | A rich icon collection (SAP-icons ), suitable for enterprise-grade apps |
Explore |
icons-tnt |
UI5 Web Components - Icons TNT | A rich icon collection (SAP-icons-TNT ), suitable for more technical apps |
Explore |
icons-business-suite |
UI5 Web Components - Icons Business Suite | A rich icon collection (BusinessSuiteInAppSymbols ), suitable for SAP Fiori apps |
Explore |
Usage
- Add one or more of the above packages as dependencies to your project.
npm i @ui5/webcomponents-icons
npm i @ui5/webcomponents-icons-tnt
npm i @ui5/webcomponents-icons-business-suite
- Import either all icons from a package, or better - only the ones your app is going to use.
Important: It is strongly recommended that you only import the icons that your app is going to use. This will keep your bundle small. Generally, importing all icons is required only if you do not know in advance which icons you are going to need.
- To import all icons from a package, use the
dist/AllIcons.js
module of that package:
import "@ui5/<PACKAGE-NAME>/dist/AllIcons.js";
For example:
import "@ui5/webcomponents-icons/dist/AllIcons.js";
import "@ui5/webcomponents-icons-tnt/dist/AllIcons.js";
import "@ui5/webcomponents-icons-business-suite/dist/AllIcons.js";
- To import individual icons, use the individual modules for the required icons:
import "@ui5/<PACKAGE-NAME>/dist/<ICON-NAME>.js";
For example:
import "@ui5/webcomponents-icons/dist/alert.js";
import "@ui5/webcomponents-icons/dist/bookmark.js";
import "@ui5/webcomponents-icons/dist/cart.js";
import "@ui5/webcomponents-icons-tnt/dist/actor.js";
import "@ui5/webcomponents-icons-business-suite/dist/add-point.js";
- Once an icon has been imported, it can be used.
All collections but @ui5/webcomponents-icons
require a prefix before the icon name. The prefix and icon name are separated by a /
.
Package | Prefix | Example |
---|---|---|
@ui5/webcomponents-icons |
N/A | alert |
@ui5/webcomponents-icons-tnt |
tnt |
tnt/actor |
@ui5/webcomponents-icons-business-suite |
business-suite |
business-suite/coins |
For example:
<ui5-icon name="alert"></ui5-icon>
<ui5-button icon="tnt/actor"></ui5-button>
<ui5-avatar icon="business-suite/coins"></ui5-avatar>
Next: Using Additional Assets