diff --git a/frontend/angular.json b/frontend/angular.json
index d4fa1496b7..9a3bc1024a 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -54,6 +54,7 @@
               "node_modules/@swimlane/ngx-datatable/themes/material.css",
               "node_modules/@swimlane/ngx-datatable/assets/icons.css",
               "src/styles.scss",
+              "node_modules/material-design-icons/iconfont/material-icons.css",
               "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "node_modules/@circlon/angular-tree-component/src/lib/angular-tree-component.css",
               "node_modules/leaflet.markercluster/dist/MarkerCluster.css",
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9da0cc7bf6..c02183c51c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -45,6 +45,7 @@
         "leaflet.locatecontrol": "^0.79.0",
         "leaflet.markercluster": "^1.5.3",
         "lodash": "^4.17.21",
+        "material-design-icons": "^3.0.1",
         "moment": "^2.29.4",
         "ng2-charts": "^4.1.1",
         "ng2-cookies": "^1.0.12",
@@ -9334,6 +9335,11 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/material-design-icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
+      "integrity": "sha512-t19Z+QZBwSZulxptEu05kIm+UyfIdJY1JDwI+nx02j269m6W414whiQz9qfvQIiLrdx71RQv+T48nHhuQXOCIQ=="
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 0180308c46..93e6661a42 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -50,6 +50,7 @@
     "leaflet.locatecontrol": "^0.79.0",
     "leaflet.markercluster": "^1.5.3",
     "lodash": "^4.17.21",
+    "material-design-icons": "^3.0.1",
     "moment": "^2.29.4",
     "ng2-charts": "^4.1.1",
     "ng2-cookies": "^1.0.12",
diff --git a/frontend/src/index.html b/frontend/src/index.html
index afc2338fe2..f9ca0bf15b 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -9,10 +9,6 @@
       name="viewport"
       content="width=device-width, initial-scale=1"
     />
-    <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
-      rel="stylesheet"
-    />
     <!-- this fake favicon avoid default browser 404 -->
     <link
       id="favicon"