@mdi/angular-material is added

angular.json

@@ -39,6 +39,11 @@
                 "glob": "_redirects",
                 "input": "src",
                 "output": "/"
+              },
+              {
+                "glob": "mdi.svg",
+                "input": "./node_modules/@mdi/angular-material",
+                "output": "./assets"
               }
             ],
             "stylePreprocessorOptions": {

package-lock.json

@@ -20,11 +20,13 @@
         "@angular/platform-browser": "13.2.3",
         "@angular/platform-browser-dynamic": "13.2.3",
         "@angular/router": "13.2.3",
+        "@mdi/angular-material": "^7.0.96",
         "@ngneat/transloco": "3.1.4",
         "apexcharts": "3.33.1",
         "crypto-js": "3.3.0",
         "highlight.js": "11.4.0",
         "lodash-es": "4.17.21",
+        "moment": "^2.29.4",
         "ng-apexcharts": "1.7.0",
         "ngx-markdown": "13.1.0",
         "ngx-quill": "16.1.2",
@@ -68,7 +70,6 @@
         "karma-jasmine": "4.0.1",
         "karma-jasmine-html-reporter": "1.7.0",
         "lodash": "4.17.21",
-        "moment": "^2.29.4",
         "postcss": "8.4.6",
         "tailwindcss": "3.0.23",
         "typescript": "4.5.5"
@@ -2744,6 +2745,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@mdi/angular-material": {
+      "version": "7.0.96",
+      "resolved": "https://registry.npmjs.org/@mdi/angular-material/-/angular-material-7.0.96.tgz",
+      "integrity": "sha512-OhDDOHSKstrG4jozg9d/0yOxeqRwAqsgkwOWWKwC8wYwbS1jErzKvOFT3mu+8Wk7GB77Coi9JrRxAVmlQEq84w=="
+    },
     "node_modules/@ngneat/transloco": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/@ngneat/transloco/-/transloco-3.1.4.tgz",
@@ -10320,7 +10326,6 @@
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
       "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
-      "dev": true,
       "engines": {
         "node": "*"
       }
@@ -16867,6 +16872,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@mdi/angular-material": {
+      "version": "7.0.96",
+      "resolved": "https://registry.npmjs.org/@mdi/angular-material/-/angular-material-7.0.96.tgz",
+      "integrity": "sha512-OhDDOHSKstrG4jozg9d/0yOxeqRwAqsgkwOWWKwC8wYwbS1jErzKvOFT3mu+8Wk7GB77Coi9JrRxAVmlQEq84w=="
+    },
     "@ngneat/transloco": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/@ngneat/transloco/-/transloco-3.1.4.tgz",
@@ -22482,8 +22492,7 @@
     "moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
-      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
-      "dev": true
     },
     "ms": {
       "version": "2.1.2",

package.json

@@ -25,6 +25,7 @@
     "@angular/platform-browser": "13.2.3",
     "@angular/platform-browser-dynamic": "13.2.3",
     "@angular/router": "13.2.3",
+    "@mdi/angular-material": "^7.0.96",
     "@ngneat/transloco": "3.1.4",
     "apexcharts": "3.33.1",
     "crypto-js": "3.3.0",

src/app/app.module.ts

@@ -2,6 +2,8 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ExtraOptions, PreloadAllModules, RouterModule } from '@angular/router';
+import { MatIconRegistry, MatIconModule } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
 import { MarkdownModule } from 'ngx-markdown';
 import { FuseModule } from '@fuse';
 import { FuseConfigModule } from '@fuse/services/config';
@@ -38,7 +40,14 @@ const routerConfig: ExtraOptions = {
 
     // 3rd party modules that require global configuration via forRoot
     MarkdownModule.forRoot({}),
+    MatIconModule,
   ],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule {
+  constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
+    matIconRegistry.addSvgIconSet(
+      domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg')
+    );
+  }
+}