How to style badge

Styles from the material/badge package can be customized using the badge-overrides mixin. This mixin accepts a set of tokens that control how the components will look, either for the entire app or under a specific selector. For example:
@use '@angular/material' as mat;

// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
  @include mat.badge-overrides((
    background-color: orange,
    text-color: red,
  ));
}
You can find the full list of supported mixins and tokens below.

Tokens supported by badge-overrides

NameTypeBased on system token
container-shapeBase None
container-sizeBase None
small-size-container-sizeBase None
large-size-container-sizeBase None
legacy-container-sizeBase None
legacy-small-size-container-sizeBase None
legacy-large-size-container-sizeBase None
container-offsetBase None
small-size-container-offsetBase None
large-size-container-offsetBase None
container-overlap-offsetBase None
small-size-container-overlap-offsetBase None
large-size-container-overlap-offsetBase None
container-paddingBase None
small-size-container-paddingBase None
large-size-container-paddingBase None
background-colorColor--mat-sys-error
text-colorColor--mat-sys-on-error
disabled-state-background-colorColor--mat-sys-error
disabled-state-text-colorColor--mat-sys-on-error
text-fontTypography--mat-sys-label-small-font
line-heightBase None
text-sizeTypography--mat-sys-label-small-size
text-weightTypography--mat-sys-label-small-weight
small-size-text-sizeBase None
small-size-line-heightBase None
large-size-text-sizeTypography--mat-sys-label-small-size
large-size-line-heightBase None
Azure & Blue theme selected.