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

antonthomas commented 1 year ago

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

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:

Import the custom font
Create a font config with mat.define-typography-config and set $font-family to the custom font
Apply the typography config to the theme
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 commented 1 year ago

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 commented 1 year ago

I have the same issue for mat-calendar

angular / components