Help changing the icons in the LayerList Widget

GabrielaBuraglia

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.

GabrielaBuraglia

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;
            }