bug(badge): Badge doesn't react to the browser font size

[ice-blaze]

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

When you change the size of the font through the browser settings. The badges remain the same size.

Comparison images: small large chrome option

Reproduction

Steps to reproduce:

1. Go in the Chrome options
2. Search for "Font size"
3. Set to "Very small"
4. Go on https://material.angular.io/components/badge/overview
5. Now change to "Very large"
6. Compare again on the doc page

Expected Behavior

I have a feeling the badges should follow the size of the font.

Actual Behavior

Badges font remain unchanged between very small or very large font option.

Environment

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

[ice-blaze]

Same comment could be applied to buttons text, they aren't impacted by the browser font size.

Or maybe text shouldn't be impacted by browser font size. Which maybe will be a legacy feature.

[mmalerba]

For button (and most components) it depends what units you use for your font sizes. define-typography-config() will generate a typography config with sizes in px units which are not affected by the browser setting. define-rem-typography-config() will create a typography config with sizes in rem units which are affected and should cause font sizes to scale.

The badge seems to be hardcoded in px though, regardless of the typography config used, so that is an issue.