How to add a red dot on the tabicon in ionic3?

How to add a dot on tab icon?

I want to add a red dot on tab icon when some parameter changes. for example the global parameter isMessage, when it is true, add a red dot, otherwise not red dot.

similar like this.

my html code is:

<ion-tabs>
  <ion-tab [root]="tab0Root" [tabTitle]="tab0Title" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab1Root" [tabTitle]="tab1Title" tabIcon="message"></ion-tab>
  <ion-tab [root]="tab2Root" [tabTitle]="tab2Title" tabIcon="bluetooth"></ion-tab>
</ion-tabs>

Could you please help?

Hi, I do not know how to do this, but the other day I copied and pasted code for ionic 5 and got something “similar” with this line:

      <ion-badge>6</ion-badge>

the full demo code is in the docs here, maybe that badge can help in your case?

1 Like

Thanks! Badge is great!

1 Like