Ionic-framework: Feature request (ionic v2): support icon and badge in ion-segment-button

[jmarginier]

Short description of the problem:

Using an icon in "ion-segment-button" breaks the CSS. Moreover, it would be convenient to have a badge system like tabs (cf #6636).

Code example :

<ion-segment light [(ngModel)]="curSegment">
        <ion-segment-button value="toAccept">
            <ion-icon item-left name="flash"></ion-icon>//bad render
            toAccept
            <ion-badge danger item-right>{{challengesToAccept.length}}</ion-badge> //bad render
        </ion-segment-button>
    </ion-segment>

Which Ionic Version? 2.x beta 8
Tested under android and browser.

[dylanvdmerwe]

Similar to https://github.com/driftyco/ionic/issues/6636

[jgw96]

Hello @jmarginier , thanks for opening an issue with us! I will be closing this issue as a duplicate of the issue @dylanvdmerwe linked too, but please feel free to post any feedback or info you have on that issue. Thanks for using Ionic!

[sndjones007]

+1

[mansi241]

You can do so by :

 <ion-segment-button value="any_value" >
          Notification 
         <ion-badge color="secondary" style="vertical-align:top;" item-right>10</ion-badge>
 </ion-segment-button>

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.