feat: control badge positioning on icon within ion-button

[hwasoocho]

Feature Request

Ionic version: [x] 4.x

Describe the Feature Request ion-button with slottable ion-badge to indicate notifications.

Describe Preferred Solution ion-tab-button already has this. From the doc:

<ion-tab-button tab="schedule">
  <ion-icon name="calendar"></ion-icon>
  <ion-label>Schedule</ion-label>
  <ion-badge>6</ion-badge>
</ion-tab-button>

Describe Alternatives Reference to how this can be done currently: https://forum.ionicframework.com/t/how-to-add-a-badge-to-a-icon-inside-a-ion-button/70868/3

[liamdebeasi]

Thanks for the issue! I put together a code pen on how this can be done with ion-button: https://codepen.io/liamdebeasi/pen/MMZyJq.

Does the example provided in my CodePen work for your use case? Thanks!

[hwasoocho]

Hi thanks for the prompt reply!

Sorry, I must've been ambiguous with my original request. Please refer to the screenshot below.

I was thinking something more like the icon-only navbar button shown at top-right which essentially mirrors what Ionic already has with ion-tab-button shown at bottom-left.

[robingenz]

Any progress? Would love to see that.

[bleuscyther]

Nice feature to have

[gmtns]

that would be great. waiting for news... 😄

[troywweber7]

This is especially important if buttons are used in a top navigational toolbar, for example.

[infacto]

In my opinion Ionic should have it. For buttons in the toolbar or tab nav etc. Maybe just a slot for this component? Badge with and without a value.

It's also a part in Material Design: https://m2.material.io/develop/android/supporting/badge https://m3.material.io/components/badges

My current workaround is to use data-badge on ion-button and style with ::after content attr. Intead of using ion-badge. Works fine. But it would be great if this is an official feature.