@ui5/webcomponents-icons

UI5 Web Components - Icons

Provides assets for the rich SAP-icons icon collection.

Provided icons

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.

Provided assets

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

No Collection

As SAP Icons is the default icon collection, you can skip the collection name and just set the name of the icon:

<ui5-icon name="accept"></ui5-icon>

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.).

Collections SAP-icon-v4 and SAP-icon-v5

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:

<ui5-icon name="SAP-icon-v5/accept"></ui5-icon>

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:

<ui5-icon name="SAP-icon-v4/accept"></ui5-icon>

Resources

• UI5 Web Components - README.md
• UI5 Web Components - Home Page
• UI5 Web Components - Using Icons

Support

We welcome all comments, suggestions, questions, and bug reports. Please follow our Support Guidelines on how to report an issue, or chat with us in the #webcomponents channel of the OpenUI5 Community Slack.

Contribute

Please check our Contribution Guidelines.

License

Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the LICENSE file.

Changelog

2.2.0-rc.0 (2024-08-08)

Bug Fixes

• core: invalidation no longer leaves component broken after error in onBeforeRendering (#9635) (136bd5a)
• stop attribute change calling property setter when coming from a setter (#9592) (95e61dd)
• ui5-combobox: correct scrolling behavior (#9632) (aa5f9e9)
• ui5-dynamic-side-content: retrieve correct width (#9642) (02f55f7), closes #9462
• ui5-menu: provide accessible name to the popover (#9574) (a14f6a1)
• ui5-multi-comboBox: delete token from mcb with grouping (#9623) (b3c38f8), closes #9544
• ui5-page: focused content is visible with floating footer (#9643) (4364e03)
• ui5-select: remove the cloning of the value state message (#9654) (1466076), closes #9347
• ui5-split-button: provide aria attributes for the arrow button (#9598) (2af2cf2), closes #9295

Features

• add enableDefaultTooltips config option (#9559) (a672788), closes #9494
• core: add asset files with fetch URLs (#9591) (f039cf6)
• framework: add [@query](https://github.com/query)(All) decorators (#9567) (242024c), closes #6743
• ui5-dialog: increase resize handle size (#9628) (ec8904b)
• ui5-text: add "emptyIndicatorMode" property and update samples (#9578) (cb218f0)