UI5 Web Components: webcomponents.SAP-icons
npm install @ui5/webcomponents-icons
Provides assets for the rich SAP-icons icon collection.
| Icon asset | Module import |
|---------------------------|----------------------------------------------------------|
| All icons (~115KB zipped) | import "@ui5/webcomponents-icons/dist/AllIcons.js"; |
| Accelerated icon | import "@ui5/webcomponents-icons/dist/accelerated.js"; |
| Accept icon | import "@ui5/webcomponents-icons/dist/accept.js"; |
| ... | ... |
| Zoom out icon | import "@ui5/webcomponents-icons/dist/zoom-out.js"; |
Note: The @ui5/webcomponents-icons package does not provide any web components per se, but rather icon assets,
usable by other web components such as ui5-icon. You could import all icons, but it's recommended to import
just the ones that your app will actually use.
Note: For a full list of the icons in the SAP-icons collection, click here.
``js`
import "@ui5/webcomponents-fiori/dist/Assets.js";
| Assets | Module | Notes |
|------------------|--------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| i18n | @ui5/webcomponents-icons/dist/Assets.js | Translations for the tooltips / "aria labels" of several icons |Usage
`html`
The package provides two versions of each icon (SAP Icons v4 and SAP Icons v5). If you don't specify a collection name like in the example above,
the framework will detect the current theme and render the corresponding icon - SAP Icons v5 for SAP Horizon theme family (sap_horizon, sap_horizon_dark, etc.), and SAP Icons v4 for all the rest (sap_fiori_3, sap_fiori_3_dark, etc.).
In case you want to always display the SAP Icons v5 icons in all themes, you can set it explicitly via the SAP-icon-v5 collection name:
`html`
The same applies if you want to always display the SAP Icons v4 icons. You can set it explicitly via the SAP-icon-v4 collection name:`html`