bug(BUTTON): "$line-height" is not respected when provided in typography config

[shhdharmen]

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

If we create a custom typography config, and provide it in theme, $line-height value for $button is not respected from the config, instead .mdc-button's line-height takes precedence. See below for example:

@use "sass:map";
@use "@angular/material" as mat;

$my-app-light-primary: mat.define-palette(mat.$indigo-palette);
$my-app-light-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-app-light-warn: mat.define-palette(mat.$red-palette);

$regular-font-family: "'Inter', sans-serif";

$my-app-typography: mat.define-typography-config(
  $button: mat.define-typography-level($font-family: $regular-font-family, $font-size: 16px, $line-height: 2.5),
);

$my-app-light-theme: mat.define-light-theme(
  (
    color: (
      primary: $my-app-light-primary,
      accent: $my-app-light-accent,
      warn: $my-app-light-warn,
    ),
    typography: $my-app-typography,
  )
);

@include mat.core();

@include mat.core-theme($my-app-light-theme);
@include mat.button-theme($my-app-light-theme);

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
}

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-4udget?file=src%2Fstyles.scss
Steps to reproduce:

1. Observe styles.scss
2. Observe styles applied to button

Expected Behavior

Button should have line-height give in typography config

Actual Behavior

Button have line-height from .mdc-button class instead

Environment

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