I found it a bit easier this way (inside a <ion-navbar />
wrapped in <ion-buttons end />
):
<button ion-button icon-only (click)="showNotifications()">
<ion-badge *ngIf="n" color="accent">{{ n }}</ion-badge>
<ion-icon name="notifications"></ion-icon>
</button>
button {
ion-badge {
position: absolute;
top: -0.2rem;
right: -0.2rem;
opacity: 0.9;
& ~ ion-icon {
margin-right: 1.2rem;
}
}
}