bug(badge): Large size setting looks the same as medium

[amysorto]

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

It seems as if setting the badge size to large is currently not working as intended. It looks the same as the medium option.

Reproduction

Docs example: https://material.angular.io/components/badge/examples#badge-overview

Expected Behavior

A bigger badge when manually set to large like on the pre M3 version shown on the v16 docs site:

Actual Behavior

Environment

• Angular:
• CDK/Material:
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

If I remember correctly, it was because M3 doesn't have a large size for the badge.

[hhubik]

A workaround I use in Angular Material v19 to make matBadgeSize='large' work is to put the following in styles.scss:

:root {
  --mat-badge-large-size-container-size: 24px;
  --mat-badge-large-size-line-height: 24px;
  --mat-badge-large-size-container-padding: 0px 8px;
  --mat-badge-large-size-text-size: 1rem;
  --mat-badge-large-size-container-offset: -16px 0;
}

They are undefined in the Angular Material code and default to the values for medium sized badge. Yes, it probably violates the M3 spec as that defines only two badge sizes - a small dot with no text and what would be the default/medium size.

https://m3.material.io/components/badges/overview