@ui5/webcomponents-icons-business-suite

UI5 Web Components - SAP Business Suite Icons

Provides assets for the rich business-suite icon collection.

Icon asset	Module import
All icons (~73KB zipped)	import "@ui5/webcomponents-icons-business-suite/dist/AllIcons.js";
1x2 grid layout icon	import "@ui5/webcomponents-icons-business-suite/dist/1x2-grid-layout.js";
2x1 grid layout icon	import "@ui5/webcomponents-icons-business-suite/dist/2x1-grid-layout.js";
...	...
Year icon	import "@ui5/webcomponents-icons-business-suite/dist/year.js";

Note: The @ui5/webcomponents-icons-business-suite 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.

Usage

Since this is a non-default icon collection, all names have to be prefixed with the collection name and a / separator when used by web components.

Example usage with <ui5-icon> web component:

<ui5-icon name="business-suite/1x2-grid-layout"></ui5-icon>

The package provides two versions of each icon (SAP Business Suite Icons v1 and SAP Business Suite Icons v2). If you don't specify the versioned collection name, like in the example above:

<ui5-icon name="business-suite/1x2-grid-layout"></ui5-icon>

the framework will detect the current theme and render the corresponding icon - from SAP Icons Business suite V2 (collection name business-suite-v2) for SAP Horizon theme family (sap_horizon, sap_horizon_dark, etc.), and from SAP Icons Business suite V1 (collection name business-suite-v1) for all the rest (sap_fiori_3, sap_fiori_3_dark, etc.).

Collections business-suite-v1 and business-suite-v2

In case you want to always display the SAP Icons Business suite V1 icons in all themes, you can set it explicitly via the business-suite-v1 collection name:

<ui5-icon name="business-suite-v1/answered"></ui5-icon>

The same applies if you want to always display the SAP Icons Business suite V2 icons. You can set it explicitly via the business-suite-v2 collection name:

<ui5-icon name="business-suite-v2/answered"></ui5-icon>

For a full list of the icons in the business-suite collection, click here.

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-rc.5 (2024-06-06)

Bug Fixes

• ui5-button: adjust screen reader announcement order (#8997) (2d9a16b)
• ui5-calendar: adjust accessibility semantics (#9102) (06891a1), closes #9068 #9069
• ui5-combobox: fix grouping sample (#9085) (2c160d3)
• ui5-date: remove circular dependency (#9137) (9c8d12e)
• ui5-input, ui5-combobox, ui5-multi-combobox: prevent native input autocomplete (#9130) (5d8dbbd)
• ui5-notification-list: improved accessibility (#9070) (5e62d4a)
• ui5-option-custom: show focus outline (#9101) (bf8366e)
• ui5-popup: initialFocus won't work if 'autofocus' is set (#8956) (2c9f775)
• ui5-popup: remove popup from the tab chain (#8955) (aedcdb9), closes #9094
• ui5-shellbar: improved samples accessibility (#8847) (7563e7d), closes #8821

Code Refactoring

• ui5-link: wrap text by default (#9006) (1924b54)
• ui5-radio-button: wrap text by default (#9117) (b8d7bac)

Features

• ui5-menu-item: add endContent slot (dc3cfde), closes #6350
• ui5-select: introduced 'popover' part (#9120) (3c03e17), closes #4503
• ui5-time-picker: introduce open and close events (#9093) (bf2d0aa)

BREAKING CHANGES

• ui5-radio-button: wrapping-type property default value has changed from None to Normal. Before:

<ui5-radio-button text="Option A with long long text"></ui5-radio-button>
<!-- would truncate the text if there is not enough space -->

Now:

<ui5-radio-button text="Option A with long long text"></ui5-radio-button>
<!-- would let the text wrap if there is not enough space -->

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

• ui5-link: wrapping-type property default value has changed from None to Normal. Before:

<ui5-link>some very very very long link</ui5-link> <!-- would truncate the text if there is not enough space -->

Now:

<ui5-link>some very very very long link</ui5-link> <!-- would let the text wrap if there is not enough space -->