In SAPUI5, how two add two icons in StandardListItem

Instead of using StandardListItem, you should use CustomListItem. With the use of CustomListItem, you can add any kind of content including multiple icons.

Understanding CustomListItem

As per SAP documentation, CustomListItem has the following use:

This control with a content aggregation can be used to customize standard list items that SAP doesn't provide. List mode and ListItem type are applied to CustomListItems as well.

Note: Even though the content aggregation allows any control, complex responsive layout controls (e.g. Table, Form) should not be aggregated as content.

Reference: SAP CustomListItem

Constructor Syntax

The constructor for CustomListItem is ?

new sap.m.CustomListItem(sId?, mSettings?)

Parameters

Param Type Description
sId? String ID for the new control, generated automatically if no ID is given
mSettings? Object Initial settings for the new control

Example: Adding Two Icons

Here's how to create a CustomListItem with two icons using HBox layout ?

var oCustomListItem = new sap.m.CustomListItem({
    content: [
        new sap.m.HBox({
            items: [
                new sap.ui.core.Icon({
                    src: "sap-icon://accept",
                    color: "#007833"
                }),
                new sap.ui.core.Icon({
                    src: "sap-icon://decline",
                    color: "#cc1919"
                }),
                new sap.m.Text({
                    text: "List Item with Two Icons"
                }).addStyleClass("sapUiMediumMarginBegin")
            ]
        })
    ]
});

Conclusion

CustomListItem provides the flexibility to add multiple icons and custom content that StandardListItem cannot support. Use HBox or VBox layouts to arrange multiple icons within your custom list items effectively.

Updated on: 2026-03-13T17:37:37+05:30

376 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements