diff --git a/angular.json b/angular.json
index a4a3765..866e45b 100644
--- a/angular.json
+++ b/angular.json
@@ -39,6 +39,11 @@
                 "glob": "_redirects",
                 "input": "src",
                 "output": "/"
+              },
+              {
+                "glob": "mdi.svg",
+                "input": "./node_modules/@mdi/angular-material",
+                "output": "./assets"
               }
             ],
             "stylePreprocessorOptions": {
diff --git a/package-lock.json b/package-lock.json
index 7795dcf..a034133 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,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",
@@ -2591,6 +2592,11 @@
         "node": ">=6.0.0"
       }
     },
+    "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",
@@ -16140,6 +16146,11 @@
       "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==",
       "dev": true
     },
+    "@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",
diff --git a/package.json b/package.json
index 2680926..fd2ad7d 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8c71131..35e7902 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule, DomSanitizer } 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 { MarkdownModule } from 'ngx-markdown';
+import { MatIconRegistry, MatIconModule } from '@angular/material/icon';
 import { FuseModule } from '@fuse';
 import { FuseConfigModule } from '@fuse/services/config';
 import { FuseMockApiModule } from '@fuse/lib/mock-api';
@@ -49,6 +51,8 @@ const routerConfig: ExtraOptions = {
     // Layout module of your application
     LayoutModule,
 
+    MatIconModule,
+
     // 3rd party modules that require global configuration via forRoot
     MarkdownModule.forRoot({}),
 
@@ -64,4 +68,10 @@ const routerConfig: ExtraOptions = {
   ],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule {
+  constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
+    matIconRegistry.addSvgIconSet(
+      domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg')
+    );
+  }
+}