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 are provided via custom properties defined in another stylesheet, which is why we're using the use-system-variables option.

Continue reading...