fix: angular material imports

Author: itssharmasandeep

angular.json

@@ -64,7 +64,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,

projects/assets-library/assets/styles/_font.scss

@@ -1,3 +1,4 @@
+@use '~@angular/material' as mat;
 @import 'color-palette';
 
 $font-family: 'Work Sans', sans-serif;
@@ -329,3 +330,7 @@ $font-family: 'Work Sans', sans-serif;
 @mixin axis-title($color: $gray-9) {
   @include chart-small-regular;
 }
+
+$mat-typography: mat.define-typography-config(
+  $font-family: $font-family
+);

src/styles/main.scss

@@ -1,5 +1,5 @@
+@use '~@angular/material' as mat;
 @import 'shared-globals';
-@import '@angular/material/theming';
 
 .vertical-flex-layout {
   @include flex-layout(column);
@@ -79,4 +79,4 @@ mark {
 // 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(mat-typography-config($font-family: $font-family));
+@include mat.core($mat-typography);