bug(mat-button-toggle): Custom font not applied to mat-button-toggle

[antonthomas]

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

v14

Description

When applying a custom font through theming, the font is not applied to some components, e.g. mat-stepper. Other components like mat-button, work well with the custom font.

Reproduction

Steps to reproduce:

1. Import the custom font
2. Create a font config with mat.define-typography-config and set $font-family to the custom font
3. Apply the typography config to the theme
4. Render a mat-button-toggle component

See this StackBlitz. This is a fork of one of the mat-button-toggle examples from the docs, with changes applied to (only) theme.scss.

On the contrary, applying the same steps and rendering a mat-button, everything works well and the button is rendered with the custom font. See this StackBlitz.

Expected Behavior

Text within mat-button-toggle should use the custom font.

Actual Behavior

The text inside the toggle button remained Roboto.

Environment

• Angular: 15.1.0
• CDK/Material: 15.1.0
• Browser(s): Edge (version 108.0.1462.54)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11 (build 22000.978)

[NCLlamas]

I am running into the same issue with the Stepper component, where the .mat-stepper-horizontal class is overriding the typography class (via _stepper-theme.scss). Problem persists even when directly overriding component theme with @include mat.stepper-theme($allfly-theme);

Adding @include mat.typography-hierarchy($theme); to my theme.scss fixed several components, but not the stepper

Environment

• Angular: 15.0.1
• CDK/Material: 15.0.0
• Browser: Chrome (v. 109.0.5414.119 )
• OS: macOS Monterey 12.3

[Londeren]

I have the same issue for mat-calendar