angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.35k stars 6.74k forks source link

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

Open antonthomas opened 1 year ago

antonthomas commented 1 year ago

Is this a regression?

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

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

Londeren commented 1 year ago

I have the same issue for mat-calendar