topic Help changing the icons in the LayerList Widget in ArcGIS JavaScript Maps SDK Questions

Help changing the icons in the LayerList Widget

GabrielaBuraglia — Mon, 10 Mar 2025 03:30:51 GMT

I'm looking to add custom icons to the layerList widget. As you can see below, I achieved occasional success by following the documentation example here https://developers.arcgis.com/javascript/latest/sample-code/widgets-layerlist-actions/

I use an async listItemCreatedFunction, with an await item.layer.when(); and then I create a custom DOM element to hold the item.title with the custom icon. However, I can't make it work consistently.

Any suggestions? Thanks in advance.

Re: Help changing the icons in the LayerList Widget

Sage_Wall — Mon, 10 Mar 2025 15:02:33 GMT

Hi @GabrielaBuraglia ,

I don't think this is really possible at this time. The item's title property should only accept strings. I tried to use some UTF-8 encoded icons and didn't have any luck, I'm curious how you got it to work in the screenshot

You can set the list item's panel content to be any custom html content, but that's not going to show up like you want it on the title line. Long term I think this could be a great enhancement and as we migrate the widgets to components adding a slot in front of the title for something like this should be possible.

Re: Help changing the icons in the LayerList Widget

GabrielaBuraglia — Mon, 10 Mar 2025 18:27:46 GMT

Ah I see, thank you for the info!! I am able to assign a custom DOM element to the item title property. I believe my issue is some sort of race condition, where sometimes it works in time (or in the correct order) to appear on the screen, and sometimes it doesn't. But I lack enough knowledge or understanding of the listItemCreatedFunction to time it correctly.

const layerList = new LayerList({ view, container: document.createElement("div"), listItemCreatedFunction: customizeLayerList }); // Function to add custom icons to each layer item async function customizeLayerList (event) { const item = event.item; await item.layer.when(); const originalTitle = item.title; const iconSvg = layerIcons[originalTitle]; // Custom DOM element, title with custom icon const customTitleContainer = document.createElement("div"); customTitleContainer.style.display = "flex"; customTitleContainer.style.alignItems = "center"; customTitleContainer.style.width = "100%"; const iconContainer = document.createElement("span"); iconContainer.className = "custom-layer-icon"; iconContainer.style.marginRight = "8px"; iconContainer.style.display = "inline-flex"; iconContainer.innerHTML = iconSvg; const textSpan = document.createElement("span"); textSpan.textContent = originalTitle; textSpan.style.flex = "1"; customTitleContainer.appendChild(iconContainer); customTitleContainer.appendChild(textSpan); // Set layer's title to custom DOM element item.title = customTitleContainer; }