Angular material badge position

user_5861265 0
Viewed 9784

I am trying implement angular material badge in my menu list.

Is it possible to position the badge in the center of list item?

Official document says : "By default, the badge will be placed above after. The direction can be changed by defining the attribute matBadgePosition follow by above|below and before|after."

But I need exclude this above|below position option

enter image description here

Or at the least if it is possible to set visible the entire badge inside the list-item

angular-material-6 angular6 angular-material angular
4 Answers

Check this blitzy

Solved using CSS

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

Removes both top and right values set by material.

user_15718930

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;
}
user_15074430

I just create my custom css class like this:

.md-badge {
  position: absolute;
  top: 28px;
  right: 30px;
}

Then add class to component

user_78818320
Related