Add a badge on icon in Ionic 3
I think you will have to use some CSS and absolute positioning to place the badge above the left corner of the cart icon.
Something like this:
<button id="cart-btn" ion-button icon-only (click)="cart()">
<ion-icon name="cart"></ion-icon>
<ion-badge id="cart-badge">260k</ion-badge>
</button>
CSS
#cart-btn {
position: relative;
}
#cart-badge {
position: absolute;
top: 0px;
right: 0px;
}
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%;
}