@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.0.0 (2024-07-03)

Bug Fixes

• dynamic-page: some remarks fixed (#9341) (eb99114)
• fix DateRangePicker test (7f7f663)
• Popup: correct "open" event (#9298) (e84c2e5)
• template result comparison (#9279) (3a02e3e)
• ui5-calendar: add icon dependency (#9289) (165d7bc)
• ui5-calendar: year button accessibility (#9255) (fc18c6d), closes #9107
• ui5-calendar: year button accessibility (#9255) (0b915d6), closes #9107
• ui5-checkbox: adjust focus outline in wrapped mode (#9335) (13f87f5), closes #9254
• ui5-color-palette-popover: enable navigation over the swatches (#9336) (0660ae5)
• ui5-daterange-picker: adjust selected range accessibility semantics (#9251) (88b3ba7), closes #9241
• ui5-link: remove the space between end-icon and text in long links (#9325) (b559431)
• ui5-list: improved items initial rendering (#9283) (2623882), closes #9266
• ui5-message-strip: Remove icon when design changes to a color set (#9229) (4f110d2), closes #9181
• ui5-multi-combobox: collapse the tokenizer on mobile devices picker close (#9291) (74e3c50), closes #9176
• ui5-multi-combobox: collapse tokenizer on n-more collapse (#9367) (1ad4b42), closes #8493
• ui5-rating-indicator: fix test page - remove duplicates (#9364) (d98fc5c)
• ui5-rating-indicator: make rating indicator ACC WCAG 2.2 compliant (#9222) (6503675)
• ui5-segmented-button-item: prevent focus of disabled items (#9239) (ca0509a), closes #9236
• ui5-tab-container: change display (#9274) (f2d94e9), closes #9248
• ui5-tab-container: enhance documentation page (#9271) (a7f99e6), closes #9079 #9248
• ui5-table: adjust unstable loading test (#9267) (3c483a1)
• ui5-table: lint issue is fixed (#9294) (71ea07c)
• ui5-table: remove circular dependency from table and row (#9261) (9932adf)
• ui5-tag: fix styling issues (#9305) (24dd42b)
• UI5Element: component invalidated when children change slots (#9104) (a882721)

Code Refactoring

• rename ListSeparators enum to ListSeparator (#9308) (26bb513)
• ui5-combobox, ui5-multi-combobox: prepare for physical list items (#9307) (3e66cc6), closes #8461
• ui5-combobox, ui5-multi-combobox: prepare for physical list items (#9307) (67c7597), closes #8461
• ui5-illustrated-message: rename IllustrationMessageSize enum (#9302) (6fe2a02), closes #8605 #8461 #7887
• ui5-input: suggestions refactoring (#9092) (36c9c8f), closes #8461 #7890
• ui5-li: replace the usage of image property with image slot (#9089) (391ffaa)
• ui5-view-settings-dialog: change opening api to open property (#9249) (52106cc)

Features

• add property initializers (#8846) (eef0cc9)
• ui5-ai-button: initial implementation (b39548f)
• ui5-flexible-column-layout: enable resize via separators drag-and-drop (#9160) (9b54af4)
• ui5-menu-separator: add new component (#8871) (f7fea29), closes #8461
• ui5-table: add range selection to selection feature (#9205) (55d99d2)
• ui5-table: navigated property for rows (#9292) (6a51172)
• ui5-table: table loading indicator (#9214) (fabc911)
• UI5Element: better support for kebab-case slots (#9106) (e1dd34c)

Reverts

• Revert "WIP: create announcing-v2.mdx" (#9350) (95b90e4), closes #9350 #9346

BREAKING CHANGES

• ui5-li: The image property of the ui5-li is removed and the imageContent slot is renamed to image. If you have previously used the image property:

<ui5-li image="./img/HT-1022.jpg">Standard List Item</ui5-li>

or the imageContent slot:

<ui5-li> Avatar inside imageContent slot
	<ui5-avatar slot="imageContent" shape="Square" initials="ABC" color-scheme="Accent2"></ui5-avatar>
</ui5-li>

Now use image slot instead:

<ui5-li> Avatar inside image slot
	<ui5-avatar slot="image" shape="Square" initials="ABC" color-scheme="Accent2"></ui5-avatar>
</ui5-li>

Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887, https://github.com/SAP/ui5-webcomponents/issues/9200

• ui5-combobox, ui5-multi-combobox: The ui5-cb-item-group & ui5-mcb-item-group text property is renamed to header-text. If you previously used the text property:

<ui5-cb-item-group text="A"> <ui5-cb-item text="Algeria"></ui5-cb-item> </ui5-cb-item-group> <ui5-mcb-item-group text="A"> <ui5-mcb-item text="Afghanistan"></ui5-mcb-item> </ui5-mcb-item-group> Now you must rename it to header-text: <ui5-cb-item-group header-text="A"> <ui5-cb-item text="Algeria"></ui5-cb-item> </ui5-cb-item-group> <ui5-mcb-item-group header-text="A"> <ui5-mcb-item text="Afghanistan"></ui5-mcb-item> </ui5-mcb-item-group> * **ui5-combobox, ui5-multi-combobox:** The ui5-cb-item-group & ui5-mcb-item-group text property is renamed to header-text. If you previously used the text property: <ui5-cb-item-group text="A"> <ui5-cb-item text="Algeria"></ui5-cb-item> </ui5-cb-item-group> <ui5-mcb-item-group text="A"> <ui5-mcb-item text="Afghanistan"></ui5-mcb-item> </ui5-mcb-item-group> Now you must rename it to header-text: <ui5-cb-item-group header-text="A"> <ui5-cb-item text="Algeria"></ui5-cb-item> </ui5-cb-item-group> <ui5-mcb-item-group header-text="A"> <ui5-mcb-item text="Afghanistan"></ui5-mcb-item> </ui5-mcb-item-group> * The `ListSeparators` (plural form) enum has been renamed to `ListSeparator` (singular form). If you previously imported the `ListSeparators`: ```ts import ListSeparators from "@ui5/webcomponents/dist/types/ListSeparators.js"; import type ListSeparators from "@ui5/webcomponents/dist/types/ListSeparators.js"; ```

Now, you must import the ListSeparator enumeration as follows:

import ListSeparator from "@ui5/webcomponents/dist/types/ListSeparator.js";
import type ListSeparator from "@ui5/webcomponents/dist/types/ListSeparator.js";

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

• ui5-illustrated-message: The enum IllustrationMessageSize is renamed to IllustrationMessageDesign. If you have previously imported the enum:

import IllustrationMessageSize from "@ui5/webcomponents-base/dist/types/IllustrationMessageSize.js"; Now import IllustrationMessageDesign instead:

import IllustrationMessageDesign from "@ui5/webcomponents-base/dist/types/IllustrationMessageDesign.js";

• ui5-input: remove type, description, icon, iconEnd, image from ui5-suggestion-item and introduce ui5-suggestion-item-custom

ui5-suggestion-item:

• type property is removed, use ui5-suggestion-item-custom instead.
• description property is removed, use ui5-suggestion-item-custom instead.
• icon property is removed, use ui5-suggestion-item-custom instead.
• iconEnd property is removed, use ui5-suggestion-item-custom instead.
• image property is removed, use ui5-suggestion-item-custom instead.

ui5-suggestion-group-item:

• renamed to ui5-suggestion-item-group
• text is removed, use headerText instead

ui5-suggestion-item-custom:

• custom suggestion item with open content similar to ui5-li-custom
• to be used for custom scenarios
• to highlight custom items use @ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js

All suggestion items are now physical items and can be overstyled. Grouping now works with via nesting: e.g.

<ui5-input show-suggestions>
  <ui5-suggestion-item-group header-text="Group 1">
    <ui5-suggestion-item text="Group Item 1"></ui5-suggestion-item>
  </ui5-suggestion-item-group>
</ui5-input>

• ui5-view-settings-dialog: Removed show and close methods.

Before, the ui5-view-settings-dialog could be opened and closed by calling show() and close():

const viewSettingsDialog = document.getElementById("exampleID");
viewSettingsDialog.show();
viewSettingsDialog.close();

Now, the dialog is opened and closed by setting the open property to true or false:

const viewSettingsDialog = document.getElementById("exampleID");
viewSettingsDialog.open = true;
viewSettingsDialog.open = false;

fixes: https://github.com/SAP/ui5-webcomponents/issues/9240

• @property decorator must be adapted according to new type parameter
• ui5-menu-separator: startsSection property removed from MenuItems

Before:

<ui5-menu> <ui5-menu-item text="Item A"></ui5-menu-item> <ui5-menu-item text="Item B" starts-section></ui5-menu-item> </ui5-menu>

Now:

<ui5-menu> <ui5-menu-item text="Item A"></ui5-menu-item> <ui5-menu-separator></ui5-menu-separator> <ui5-menu-item text="Item B"></ui5-menu-item> </ui5-menu>