question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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. test

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
sndjones007commented, Aug 1, 2016

+1

1reaction
mansi241commented, Mar 21, 2018

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>
Read more comments on GitHub >

github_iconTop Results From Across the Web

support icon and badge in ion-segment-button · Issue #6957 ...
Feature request (ionic v2): support icon and badge in ion-segment-button #6957 ... Using an icon in "ion-segment-button" breaks the CSS.
Read more >
ion-segment-button - Ionic Framework
ion -segment-buttons are groups of related buttons inside of a Segment. Learn to use segment button icons and check their values on Ionic...
Read more >
Ionic Component Documentation
Buttons are simple components in Ionic, can consist of text, an icon, or both, and can be enhanced with a wide range of...
Read more >
Is there a way to load ionic pages inside of an ionic segment?
I have three ionic pages which i am trying to display inside of ionic segments. I want to keep the functionality of the...
Read more >
Ionic Segment Button Notification Badge - CodePen
Insecure Resource. The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found