Hi @MirzaMuhammadAhsanAli ,
Since we have redesigned the layer list to use calcite components you will run into issues trying to modify things with CSS like the codepen is trying to do. This is because the components are encapsulated within shadow dom.
You can create a new Legend for the list item panel content without using the "legend" string and set any of the properties on the Legend you would like. In this case I set the icon to be the information icon. I modified your original codepen. https://codepen.io/sagewall/pen/vYojjJE
listItemCreatedFunction: (event) => {
const item = event.item;
if (item.layer.type != "group") {
item.panel = {
content: new Legend({
icon: "information",
view
}),
open: false,
};
}
}
You can also set the dir attribute on the body or a containing html element to switch the text direction. This will move the actions over to the left hand side of the layer list.
<body dir="rtl">
