bug(Badge): position and size on page is off

[BackwardsMan]

Is this a regression?

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

The previous version in which this bug was not present was

No response

Description

The position of the Badge on the Angular Material webpage is off and the wrong size for some badges.
Don't know if this is a bug in the component itself or strictly how it is displayed on the webpage
See image:

Reproduction

Link: https://material.angular.io/components/badge/overview

Steps to reproduce:

1. Go to webpage
2. Look at examples for the Badge

Expected Behavior

1. Expect a small badge to be smaller than default
2. Expect a large badge to be larger than default
3. Expect no badges to overlap text
4. Expect no badges to overlap icons
5. Expect badge with icon to show number 15

Actual Behavior

1. Small badge is not smaller than default badge
2. Large badge is nog bigger than default badge
3. Large badge overlaps with text
4. Icon with a badge overlaps the icon
5. Icon with a badge shows "1 and ellipsis"

Environment

• Browser(s): Chrome Version 129.0.6668.90 (Official Build) (arm64)
• Operating System: macOS