fix(button): allow any element type to to use the "icon-only" slot

[bitflower]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Not sure if this has or needs a test?

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Only ion-icon are recognized inside the slots to indicate the button's iconOnly mode.

What is the new behavior?

Any element with slot='icon-only' is recognized.

Does this introduce a breaking change?

• Yes
• No

[bitflower]

Use case: Avatar image (for example @claviska 's sl-avatar) in an ion-toolbar:

[liamdebeasi]

Thanks for the PR! Could you please provide a code example of the use case in #22168 (comment) that highlights the current issues you are running into with icon-only?

[bitflower]

Sure, I want to use the component sl-avatar from the Shoelace Design System. It's has the appearance of an icon = round. That's why I want to treat it as icon-only to center it inside the button.

Sample code to my example image from the comment above:

<ion-button>
   <sl-avatar slot='icon-only' />
</ion-button>

[liamdebeasi]

Thanks! It sounds like you are mostly interested in ensuring that the ripple effect correctly covers the sl-avatar component?

[bitflower]

a) the covering would be nice but b) having a round ripple is more important. Right now it's a rectangle.