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

Ionic Framework ionic-v3
1

I need to add a badge to a ion icon inside a ion-button this way:

How could I do this with Ionic 2?

7 Likes
2

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
3

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
4

bonjour svp comment vs avez fait pour la fonction je trouve pas bcp de doc sur les systèmes de notifications???

6

nice it’s work
Thanks bro

7 
<ion-avatar slot="end" >
      <ion-badge style="position: absolute">5</ion-badge>
      <img [src]="member?.photoURL" />
    </ion-avatar>

Does it for me. Thank you for the code.

8

Is there a solution for Ionic 4? I prefer a more official way, instead of css “hacking”.

<ion-buttons slot="end">
  <ion-button>
    <ion-icon slot="icon-only" name="warning"></ion-icon>
    <ion-badge>3</ion-badge>
  </ion-button>
</ion-buttons>

(does not work)

This is an essential UI element. Ionic should provide it in an official way.

One workaround:

<ion-button>
  <ion-icon size="large" name="warning"></ion-icon>
  <ion-label>3</ion-label>
</ion-button>

Just a button with a large icon and label text. It may not win a beauty contest.

Issue of an icon-only button: It’s overflow: hidden. You have to hack a bit. Also, you could use a own badge element. …

9

below working in ionic 5

css

ion-toolbar {
  --min-height: 50px;
}

html

<ion-buttons slot="end" (click)="GotoNotityPage()">
        <ion-icon slot="icon-only" name="notifications-outline"></ion-icon>
        <ion-badge color="danger" style="position: absolute; right: -5px; top: -3px;">3</ion-badge></ion-buttons>

Hope help!

3 Likes
10 
ion-toolbar{
    padding-right: 5px;
}

Thanks for the friend input, I would just add a “padding-right: 5px;” to the ion-toolbar.

So I stay perfect