How to add a badge to a icon inside a ion-button?

I was able to achieve this with some CSS:

Template:

<div>
    <button id="notification-button" ion-button clear>
        <ion-icon name="notifications">
          <ion-badge id="notifications-badge" color="danger">5</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%;
        }
16 Likes