How to get sl-icon to update on name property change

[JackWillDavis]

Hi all,

Having a small issue with shoelace which I was hoping someone could help with.

I have an sl-icon nested inside an sl-button like so:

<sl-button size="${this.size}" href="${this.href}">
  <sl-icon slot="${this.position}" name="${this.icon}"></sl-icon>
  <slot></slot>
</sl-button>

I'm using properties so I can adjust the values of the button/icon from a dropdown and see the result automatically. They're all working as expected apart from the sl-icon's name.

I can manually change the prefix attribute of the icon and it changes it's place properly however, when I change the icon name (for example from box-arrow-up-right to file-earmark-text) it doesn't update the icon. If I save the page, the correct icon is displayed on reload but it won't show any changes to it when I'm editing the page itself.

I've had a look through the documentation and I can't see any method I can call to force the icon to update. Not sure at this point if it's a limitation of the library or if I've missed it in the docs somewhere. Has anyone come across this before?

[claviska]

This looks like the bug that was fixed in #410. I'll release beta.38 shortly which will include this fix.

[JackWillDavis]

Ah nice, thanks for the reply. I'll try out the next beta when it's out and let you know if it solves it.

[claviska]

v2.0.0-beta.38 is now available: https://shoelace.style/resources/changelog?id=_200-beta38