After upgrading Angular from 15 to 19, mat-raised-button no longer works

I recently upgraded my Angular project from version 15 to 19, and now mat-raised-button is no longer working. The button still renders in the DOM, but it no longer has the Material Design styles — it's just a plain HTML button.

SCSS

@use '@angular/material' as mat;

// This file can be used to create a base theme CSS file for a brand.
// To export the CSS file, run: ./node_modules/node-sass/bin/node-sass src/brand-theme.scss dist/brand-theme.css

@include mat.elevation-classes();
@include mat.app-background();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$candy-app-primary: mat.m2-define-palette(mat.$m2-red-palette);
$candy-app-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn: mat.m2-define-palette(mat.$m2-indigo-palette);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat.m2-define-light-theme((
color: (
primary: $candy-app-primary,
accent: $candy-app-accent,
warn: $candy-app-warn,
),
typography: mat.m2-define-typography-config(),
density: 0,
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($candy-app-theme);


HTML

<button *ngIf="!task.completed" mat-raised-button class="right" [routerLink]="['/sign', task.taskId]" color="primary">
<i class="material-icons">create</i>
{{ getMessage('task.button') }}
</button>

Continue reading...