Angular material badge position Angular material badge position angular angular

Angular material badge position


Check this blitzy

Solved using CSS

.mat-badge-medium.mat-badge-above .mat-badge-content {    top: -3px;}


mat-badge-medium.mat-badge-above .mat-badge-content {  top: unset;  right: unset;}

Removes both top and right values set by material.


If you want to style it from the own component.css file you can do:

:host ::ng-deep .mat-badge-content {left: -4px !important;top: 40px !important;}