adds icon, icon-before, icon-after properties

[nathanwoulfe]

Adds icon, icon-before and icon-after properties to uui-button, as a shorthand method of rendering an icon in the button, either before or after the label (or both, if that's your vibe).

Setting the icon- property adjusts the whitespace between the icon and the label. If there is no visible label, use the icon property which will style the button as if the compact attribute was applied.

Open to suggestions re property naming. It's obvious that it's an icon, but we might want to be more generic (prefix and suffix), but that does lose clarity.

Also considered adding prefix and suffix slots, but that misses the intent of this change, which is to make it trivially easy to add an icon to a button (ie without having to provide additional markup).

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-786.westeurope.azurestaticapps.net

[nielslyngsoe]

Hi @nathanwoulfe

We from an architectural point originally discarded these types of directions as this types of optimisations will lead to the bloated code we have in the current version of Backoffice.
Generally this direction had no end once we started this path. Next thing will be icon-color and then someone wants to use the badge easily and what not. Another thing to be aware about is that every time a feature has been appended to the icon, it then has to be updated for all the things that ghost-implements of the icon. Resulting in a lot of prop-drilling. So in general we are not interested in magically wrapping components into each other, cause that means prop-drilling and at the end of the day it obfuscates what actually happens.

So I will advice you to implement the icon on your own, like this:
<uui-button label="A11Y proper label"> <uui-icon name="favorite"></uui-icon> Readable label </uui-button>