Angular 12 Material Notification Badge Example – Numbers, Customization Tutorial

In this Angular Material tutorial, we’ll learn how to implement badge numbers indicating a message or notification and also how to customize it using Material UI in the Angular 12 application.

This Angular post is compatible with Angular 4 upto latest versions, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular 12 and Angular 13

Badges are designed to display the count in numbers or characters over another element like a button or icon to display or highlight that there is some information that can be checked on some action.

A badge acts and inspired similar to Android or iOS application icons which show a count of notification related to that application. Badges are usually added to attract user attention and at the same time inform about intensity in form of number count.

In Angular application, we can easily display badges using Material components and also customize them according to our needs.

Let’s start implementation in a new Angular application.

How to Add Material Badges in Angular App?


Create a New Angular Application

Run the following ng command to create a new Angular project

$ ng new angular-material-badges-app
# ? Would you like to add Angular routing? No
# ? Which stylesheet format would you like to use? SCSS

Enter the project directory

$ cd angular-material-badges-app

Run the application

$ ng serve --open


Install Material Package

After creating the Angular project, install the Material UI library by hitting the following ng command

$ ng add @angular/material
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink      
? Set up global Angular Material typography styles? No  
? Set up browser animations for Angular Material? Yes


Update App Module

To use Badges in the Angular project, we need to import the required API modules.

Open the app.module.ts file then import the MatBadgeModule then add in the imports array:

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatBadgeModule } from '@angular/material/badge';

  declarations: [
  imports: [


  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }



Adding Material Badges in Angular Application

After importing the MatBadgeModule, the badges can be easily added to adding the matBadge property to any element in the template HTML.

<span matBadge="4">My Notifications</span>

In a similar way, Badges can be added to buttons and icons as well.

    <button matBadge="8" mat-raised-button color="warn">

    <mat-icon matBadge="5">notifications</mat-icon>

Note: We also need to import the MatIconModule and MatButtonModule modules to add buttons and icons.


Configurations for Material Badges

Following are important configuration properties for Material Badges


matBadgeColor: The color of the badge. Can be primary, accent, or warn.

    <button matBadge="8" mat-raised-button matBadgeColor="primary">
    <button matBadge="8" mat-raised-button matBadgeColor="accent">
    <button matBadge="8" mat-raised-button matBadgeColor="warn">


matBadgeHidden: Whether the badge is hidden.

<button matBadge="8" mat-raised-button [matBadgeHidden]="isBadgeHidden" (click)="isBadgeHidden = !isBadgeHidden">
      Toggle Badge


Badge Description

matBadgeDescription: The message used to describe the decorated element via aria-describedby.


Badge Content

matBadge: The content for the badge.

    <button matBadge="8" mat-raised-button>
      Number Badge
    <button matBadge="$15" mat-raised-button>
      Cart Details

Disabled Badge

matBadgeDisabled: Whether the component is disabled.

<button matBadge="8" mat-raised-button [matBadgeDisabled]="isBadgeDisabled"
      (click)="isBadgeDisabled = !isBadgeDisabled">
      Disable Badge


Badge Overlapping

matBadgeOverlap: Whether the badge should overlap its contents or not.

<button matBadge="8" mat-raised-button [matBadgeOverlap]="isBadgeOverlapped"
      (click)="isBadgeOverlapped = !isBadgeOverlapped">
      Toggle Overlapping Badge

Positioning Badge

matBadgePosition: Position the badge should reside. Accepts any combination of ‘above’|’below’ and ‘before’|’after’.

    <button matBadge="4" mat-raised-button matBadgePosition="'above'">
      Badge Above
    <button matBadge="4" mat-raised-button matBadgePosition="'below'">
      Badge Below
    <button matBadge="4" mat-raised-button matBadgePosition="'before'">
      Badge Before
    <button matBadge="4" mat-raised-button matBadgePosition="'after'">
      Badge After



matBadgeSize: Size of the badge. Can be ‘small’, ‘medium’, or ‘large’.

  <button matBadge="4" mat-raised-button matBadgeSize="small">
    Badge Small
  <button matBadge="4" mat-raised-button matBadgeSize="medium">
    Badge Medium
  <button matBadge="4" mat-raised-button matBadgeSize="large">
    Badge Large



Badges in Angular application can be easily implemented using Material MatBadgeModule API. They support a number of properties to control its behavior in the project requirements.


Notify of

Inline Feedbacks
View all comments