Add a badge on icon in Ionic 3

user_3858422 0
Viewed 21783

I need to add a number badge to the cart icon in ionic 3 so that the user gets the update of number of elements in the cart without actually visiting the page i tried to use the code of button and badge together but it was of no use

  <button ion-button icon-only (click)="cart()">
      <ion-icon name="cart"> <ion-badge item-end>260k</ion-badge></ion-icon>
  </button>

Above code displays the badge next to the cart icon but not over it, so is there a way to add badge to the icon itself like we have in notification alert badges?

ionic2 ionic3 ionic-framework sass css
4 Answers

Try this one

Template:

  <div>
        <button id="notification-button" ion-button clear>
            <ion-icon name="notifications">
              <ion-badge id="notifications-badge" color="danger">7</ion-badge>
            </ion-icon>              
        </button>
    </div>

CSS:

  #notification-button {            
            position: relative;
            width: 42px;
            top:1px;
            right: 1px;
            overflow: visible!important;
        }


   #notifications-badge {
            background-color: red;
            position: absolute;
            top: -3px;
            right: -3px;
            border-radius: 100%;
        }
user_84946960

With the last version of Ionic (Ionic 4), this does the job perfectly:

<ion-tabs>

  <ion-tab-bar slot="bottom">

    <ion-tab-button tab="profile">
      <ion-icon name="person"></ion-icon>
      <ion-badge color="danger">8</ion-badge>
      <ion-label>profile</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
      <ion-badge color="warning">3</ion-badge>
      <ion-label>Market</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

Reference: https://www.youtube.com/watch?v=Q6ojtDFOaKA

user_82453870

for ionic 5 this work perfectly for me :

<ion-buttons slot="start" (click)="whateverYouWant()">
    <ion-icon slot="start" name="mail"></ion-icon>
    <ion-badge color="danger" style="position: absolute; right: -5px; top: -3px;">3
    </ion-badge>
</ion-buttons>

PS : in my case it is place in a ion-item

preview result

Admin1
Related