onclick handler on wa-icon inside a wa-button?

[RobotGizmo]

I would like to have a wa-button with a wa-icon that is clickable inside it, like an add/remove button or something like that. Kind of like the wa-tag but using wa-button. Adding onclick to the wa-icon doesn't seem to do anything, the wa-button click just fires. Is there a way to do this? Thanks!

[claviska]

Nested interactive elements aren't a great pattern for accessibility. I'd suggest using a container and positioning the icon on top of the button. This would prevent event bubbling issues, maintain tab order, and avoid confusion for users of assistive devices.

<div class="icon-over-button">
  <wa-button>Click the button</wa-button>
  <wa-icon name="..." label="Click the icon"></wa-icon>
</div>

In this case, the <div> might have position: relative, the button could be placed statically, and the icon could be positioned absolutely. You might also use CSS Grid depending on the exact appearance you're looking for.