Upgrade to @angular/material v12

.browserslistrc

@@ -2,10 +2,16 @@
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries
 
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-last 2 versions
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
 Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

package.json

@@ -54,15 +54,15 @@
   "devDependencies": {
     "@angular-devkit/build-angular": "~12.2.10",
     "@angular/animations": "~12.2.10",
-    "@angular/cdk": "~11.0.2",
+    "@angular/cdk": "~12.2.10",
     "@angular/cli": "~12.2.10",
     "@angular/common": "~12.2.10",
     "@angular/compiler": "~12.2.10",
     "@angular/compiler-cli": "~12.2.10",
     "@angular/core": "~12.2.10",
     "@angular/forms": "~12.2.10",
     "@angular/language-service": "~12.2.10",
-    "@angular/material": "^11.0.2",
+    "@angular/material": "^12.2.10",
     "@angular/platform-browser": "~12.2.10",
     "@angular/platform-browser-dynamic": "~12.2.10",
     "@angular/router": "~12.2.10",

src/styles.scss

@@ -1,3 +1,4 @@
+@use '~@angular/material' as mat;
 $material-icons-font-path: '~material-icons/iconfont/';
 @import '~material-icons/iconfont/material-icons.scss';
 
@@ -9,26 +10,26 @@ $material-icons-font-path: '~material-icons/iconfont/';
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat-core();
+@include mat.core();
 
 // 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/
-$billbox-primary: mat-palette($mat-blue, A700);
-$billbox-accent: mat-palette($mat-pink, A200, A100, A400);
+$billbox-primary: mat.define-palette(mat.$blue-palette, A700);
+$billbox-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$billbox-warn: mat-palette($mat-red);
+$billbox-warn: mat.define-palette(mat.$red-palette);
 
-$billbox-dark-primary: mat-palette($mat-blue, A100);
+$billbox-dark-primary: mat.define-palette(mat.$blue-palette, A100);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$billbox-theme: mat-light-theme(
+$billbox-theme: mat.define-light-theme(
 	$billbox-primary,
 	$billbox-accent,
 	$billbox-warn
 );
-$billbox-dark-theme: mat-dark-theme(
+$billbox-dark-theme: mat.define-dark-theme(
 	$billbox-dark-primary,
 	$billbox-accent,
 	$billbox-warn
@@ -39,10 +40,10 @@ $billbox-dark-theme: mat-dark-theme(
 // that you are using.
 @media screen and (prefers-color-scheme: light),
 	screen and (prefers-color-scheme: no-preference) {
-	@include angular-material-theme($billbox-theme);
+	@include mat.all-component-themes($billbox-theme);
 }
 @media screen and (prefers-color-scheme: dark) {
-	@include angular-material-theme($billbox-dark-theme);
+	@include mat.all-component-themes($billbox-dark-theme);
 }
 
 /* You can add global styles to this file, and also import other style files */