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

Dirk_Vandervoort

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

 

FC_Basson

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>