How do I add a Badge to an Icon

Question

I need to add a badge to the icon on my project that displays the count number values, i cant seem to make the badge work. Can anyone help me with this? and make the badge display the count value on the icon.

<div class="actions-bar" fxLayout="row" fxLayoutAlign="end center">
<label *ngIf="_dataSource.data.length > 0" class="mr-8">
<mat-icon class="mat-18 tick-icon">navigation</mat-icon>
<span>{{_dataSource.data.length}} locations</span>
</label>
<label *ngIf="_dataSource.data.length > 0" class="mr-8">
<mat-icon class="mat-18 warning-icon">warning</mat-icon>
<span>{{countWarningAddress()}} locations</span>
</label>
<label *ngIf="_dataSource.data.length > 0" class="mr-8">
<mat-icon matBadge="" matBadgeColor="accent" class="mat-18 tick- 
icon">check_circle</mat-icon>
<span>{{countValidAddress()}} locations</span>
</label>
<label *ngIf="_dataSource.data.length > 0" class="mr-8">
<mat-icon class="mat-18 flag-icon">flag</mat-icon>
<span>{{countInvalidAddress()}} locations</span>
</label>

Answer 1

If you are talking about hybrid mobile app badge then you can add plugin https://www.npmjs.com/package/cordova-plugin-badge for badge and use

cordova.plugins.notification.badge.set(count);