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
Solved! Go to Solution.
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>
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>