Using Vue to set raw icon_data fails on first page load

[TheNewSound]

Describe the bug Using the lord-icon webcomponent inside a Vue project, and using :icon.prop="icon_data", the icon does not render on a fresh page load. On a fresh page load, the lordicon/element set icon(...) method is not called, and Vue sets the element.icon property 'raw' on the DOM element. This is likely because the webcomponent is connected to the DOM element later. And when the lord-icon webcomponent is trying to get ready later, the get icon(...) getter then shadows the .icon property, trying to read ._assignedIconData, which is undefined by default. It then fails instantiation of the player instance.

I also tried using :iconData.prop="icon_data", while this works for the first page load, it fails (and throws console warnings) when the webcomponent is already loaded/connected, because it is a read-only attribute (there is no setter for the iconData property).

So please either add a setter for the iconData property, or update the getter for the icon property to read the raw .icon data which was set on the DOM element before the webcomponent was loaded.

To Reproduce Steps to reproduce the behavior:

1. Use the lord-icon webcomponent inside a Vue project
2. Use :icon.prop="icon_data", where icon_data is the correct icon data
3. On a fresh page load, the icon does not render, only when it is mounted a bit later than the page load

Expected behavior Icon should render.

Additional context I do not want to use an iconLoader, since this complicates treeshaking.

Two possible solutions:

1. add a setter for the iconData property, or
2. update the getter for the icon property to read the raw .icon data which was set on the DOM element before the webcomponent was loaded.

[baszczewski]

Thank you very much for your submission. We have released an update to the library, which includes a setter for iconData. This can theoretically be used even before our custom element is initialized.