Can't figure out why some styles are missing in @Angular/Material datepicker

We have a web app that we're updating from Angular v16 to v18. 99% of stuff looks good and works just fine, but I have one issue I just can't figure out, and that is that the styles for the date picker's "next/prev month" buttons seem to be missing, like so:

Coincidentally, during testing we accidentally loaded the site with the stylesheets for the old version still included, and lo and behold, it fixed the issue! After doing some investigation, it seems like this rule is being provided by the @Angular/Material v16 stylesheet, but is not included in the v18 stylesheet.

.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
  width: var(--mdc-icon-button-state-layer-size);
  height: var(--mdc-icon-button-state-layer-size);
  padding: 8px;
}

I can't figure out why I seem to be missing important styles. Here's the relevant contents of our styles.scss

@use '@angular/material' as mat;

$theme: mat.define-theme((
  color: (
    theme-type: light,
    use-system-variables: true,
    system-variables-prefix: dst-sys-color
  ),
  typography: (
    system-variables-prefix: md-sys-typescale
  ),
  density: (
    scale: -2
  )
));

@include mat.core;

html {
  min-width: 1024px;
  @include mat.typography-hierarchy($theme, $back-compat: true);
  @include mat.all-component-themes($theme);
}

I should note that the theme colors and typography properties are provided via custom properties defined in another stylesheet, which is why we're using the use-system-variables option. They're obviously loading correctly or else the whole site would be broken, not just this tiny UI element.

Tried to make a stackblitz, but for some reason the date picker trigger just won't open the calendar? It's my first time using stackblitz so I may be doing something wrong. https://stackblitz.com/edit/stackblitz-starters-ngsdm9

The problem arises from the scale property being set to -2, hence the font size is drastically reduced and causing this issue. I found this code snippet that might be related to the actual problem.

_datepicker-theme.scss

/// Outputs density theme styles for the mat-datepicker.
/// @param {Map} $theme The theme to generate density styles for.
@mixin density($theme) {
  @if inspection.get-theme-version($theme) == 1 {
    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
  } @else {
    // TODO(crisbeto): move this into the structural styles
    // once the icon button density is switched to tokens.

    // Regardless of the user-passed density, we want the calendar
    // previous/next buttons to remain at density -2
    .mat-calendar-controls {
      @include icon-button-theme.density(-2);
    }
  }
}

To solve this issue just add the below CSS, which hardcodes the size of --mdc-icon-button-state-layer-size: 40px;, to prevent the bug.

.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
}

Also please raise a github issue on angular/components github page to get better understanding of the actual problem.

SCSS Code:

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    density: (
      scale: -2,
    ),
  )
);

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;

  @include mat.all-component-themes($theme);
}

.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
}

html {
  height: 100%;
}

@include mat.core;
@include mat.color-variants-backwards-compatibility($theme);

Stackblitz Demo