diff --git a/ui-ngx/angular.json b/ui-ngx/angular.json
index 3cad30304a..6d186ee012 100644
--- a/ui-ngx/angular.json
+++ b/ui-ngx/angular.json
@@ -59,6 +59,11 @@
                 "glob": "marker-shadow.png",
                 "input": "node_modules/leaflet/dist/images/",
                 "output": "/"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/material-design-icons/iconfont/",
+                "output": "/fonts"
               }
             ],
             "styles": [
diff --git a/ui-ngx/src/index.html b/ui-ngx/src/index.html
index 4f2672a518..c591cacfe1 100644
--- a/ui-ngx/src/index.html
+++ b/ui-ngx/src/index.html
@@ -24,6 +24,8 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="thingsboard.ico">
+  <link rel="preload" href="fonts/MaterialIcons-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
+  <link rel="stylesheet" href="fonts/material-icons.css" />
   <style type="text/css">
 
     body, html {
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index 600121b66d..066559d1fd 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -15,7 +15,6 @@
  */
 /* You can add global styles to this file, and also import other style files */
 
-@import '~material-design-icons/iconfont/material-icons.css';
 @import '~typeface-roboto/index.css';
 @import '~font-awesome/css/font-awesome.min.css';
 @import 'theme.scss';