Add icon property to uui-button component

[nathanwoulfe]

To save lazy developers like me from having to slot a uui-icon element in buttons, we could add an icon property to the button element, and render the icon if the property exists. Even better, icon-prepend and icon-append for extra options.

That would also allow the library to control layout (eg whitespace between icon and text) and remove the need for specifying the compact attribute for icon-only buttons.

[bjarnef]

It could also some similar this with prefix and suffix slots:
https://shoelace.style/components/button#prefix-and-suffix-icons

[nathanwoulfe]

I did consider that, but figured it's still more code than a property accepting an icon name - I've gone with icon-before and icon-after properties so we can still prefix/suffix the icon. PR is incoming.

[bjarnef]

Yes, I guess it comes to responsibility of the different parts as components can easily end up with a lot of properties/attributes where some only is relevant based on other attribute values.

Perhaps a single icon property is sufficient + icon position/placement.

Or icon-start and icon-end. Prepend and append are probably more familiar from different frameworks like Bootstrap or Tailwind.

I am not sure there's a use-case for two icons in button at the same time (and not sure if I like it), but currently I think the slotted content allows to insert several icons.

[bjarnef]

Another suggestion: leading and trailing icons
https://tailwindui.com/components/application-ui/forms/input-groups

[nathanwoulfe]

I like the idea of separating the position to a separate attribute, and then allowing only the single icon. If anyone wants multiple icons, they can always slot whatever they need to make whatever horrible buttons their heart desires...

[bjarnef]

Yes, it is what PrimeVue for instance does https://primevue.org/button/#icons

[iOvergaard]

@bjarnef Funny you should mention PrimeVue. I like the way Vuetify does it, if you just want to show an icon, you use the "icon" attribute. You can also use prepend-icon and append-icon for more specific cases. And you have prepend and append slots (notice no "icon" in the name here).

https://vuetifyjs.com/en/components/buttons/#icon

[nathanwoulfe]

That lands somewhere close to what I've implemented in #786, minus the slots:

• icon-before adds the icon before the label
• icon-after adds the icon after the label
• can use both
• can also use icon which behaves same as icon-before

Happy to revisit my approach if it makes more sense to add slots too

[bjarnef]

@iOvergaard yes, I mentioned PrimeVue because we use it in a current headless project + Nuxt 3 using Delivery API on Umbraco Cloud 😎