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

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;
		}
	}
}
6 Likes