topic Setting a calcite-list-item icon in JS code (4x) in Calcite Design System Questions

Setting a calcite-list-item icon in JS code (4x)

Dirk_Vandervoort — Tue, 07 Nov 2023 23:07:53 GMT

Greetings:

I am creating calcite-list-items in code. My desire is to assign the calcite icon to the calcite-list-item in code:

let item = document.createElement("calcite-list-item"); item.setAttribute("value", "This is my value"); item.setAttribute("label", "This is my label"); item.setAttribute("Description", "This is my description.") item.setAttribute("icon", "layer"); anItemsContainer.appendChild(item);

The calcite-list-items display with Label and Description, and a click event reveals the Value. But alas, no icon.

So my question is: How can I get that icon to display in code.

TIA

Re: Setting a calcite-list-item icon in JS code (4x)

FC_Basson — Wed, 08 Nov 2023 06:17:50 GMT

The calcite-list-item does not have an "icon" property.

https://developers.arcgis.com/calcite-design-system/components/list-item/#properties

Not sure where you want the icon displayed, but you can set a calcite-icon in one of the "content" slots. So instead of setting the "icon" attribute, set the item innerHTML to something like this:

item.innerHTML = '<calcite-icon icon="layer" slot="content-start"></calcite-icon>';

The completed element should look like this:

<calcite-list-item label="My label" description="My description" value="myvalue"> <calcite-icon icon="layer" slot="content-start"></calcite-icon> </calcite-list-item>