diff --git a/client/core/src/components/icon/icon.js b/client/core/src/components/icon/icon.js
index 34af96deb..5e78a3a1b 100644
--- a/client/core/src/components/icon/icon.js
+++ b/client/core/src/components/icon/icon.js
@@ -1,8 +1,33 @@
 import ngModule from '../../module';
 import './style.css';
 
+class Icon {
+    constructor($attrs) {
+        this.$attrs = $attrs;
+        this._icon = null;
+    }
+    set icon(value) {
+        this._icon = value;
+        this.drawIcon();
+    }
+    get icon() {
+        return this._icon;
+    }
+    drawIcon() {
+        if (this.icon.startsWith('icon-')) {
+            this.iconClass = this.icon;
+            this.iconContent = '';
+        } else {
+            this.iconClass = 'material-icons';
+            this.iconContent = this.icon;
+        }
+    }
+}
+Icon.$inject = ['$attrs'];
+
 ngModule.component('vnIcon', {
-    template: '<i class="material-icons">{{::$ctrl.icon}}</i>',
+    template: '<i class="{{::$ctrl.iconClass}}">{{::$ctrl.iconContent}}</i>',
+    controller: Icon,
     bindings: {
         icon: '@'
     }
diff --git a/client/core/src/components/icon/style.css b/client/core/src/components/icon/style.css
index c49350de3..f0cb1d34c 100644
--- a/client/core/src/components/icon/style.css
+++ b/client/core/src/components/icon/style.css
@@ -2,7 +2,7 @@ vn-icon {
     display: inline-block;
     font-size: 18pt;
 }
-vn-icon > i.material-icons {
+vn-icon > i {
     display: block;
     font-size: inherit;
 }
diff --git a/client/core/src/core.js b/client/core/src/core.js
index 2889a690e..d3601a8e1 100644
--- a/client/core/src/core.js
+++ b/client/core/src/core.js
@@ -1,9 +1,7 @@
-import './styles/mdl-override.css';
-import './styles/mdi-override.css';
-import './styles/zoom-image.css';
+import './styles';
 
 export * from './module';
-export * from './directives/index';
-export * from './filters/index';
-export * from './lib/index';
-export * from './components/index';
+export * from './directives';
+export * from './filters';
+export * from './lib';
+export * from './components';
diff --git a/client/core/src/styles/fontello-head.css b/client/core/src/styles/fontello-head.css
new file mode 100644
index 000000000..7761cfac0
--- /dev/null
+++ b/client/core/src/styles/fontello-head.css
@@ -0,0 +1,30 @@
+@font-face {
+    font-family: 'fontello';
+    
+    src: url('./fontello.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+   
+[class^="icon-"]:before, [class*=" icon-"]:before {
+    font-family: "fontello";
+    font-style: normal;
+    font-weight: 400;
+    speak: none;
+   
+    display: inline-block;
+    text-decoration: inherit;
+    
+    text-align: center;
+    /* opacity: .8; */
+   
+    /* For safety - reset parent styles, that can break glyph codes*/
+    font-variant: normal;
+    text-transform: none;
+   
+    /* Font smoothing. That was taken from TWBS */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+  }
+   
\ No newline at end of file
diff --git a/client/core/src/styles/fontello-icons.css b/client/core/src/styles/fontello-icons.css
new file mode 100644
index 000000000..4a1201de1
--- /dev/null
+++ b/client/core/src/styles/fontello-icons.css
@@ -0,0 +1,6 @@
+
+.icon-tags:before { content: '\e800'; } 
+.icon-tree:before { content: '\e801'; } 
+.icon-clone2:before { content: '\e802'; }
+.icon-preview:before { content: '\e803'; }
+.icon-history:before { content: '\f1da'; }
\ No newline at end of file
diff --git a/client/core/src/styles/fontello.woff2 b/client/core/src/styles/fontello.woff2
new file mode 100644
index 000000000..22d0e459c
Binary files /dev/null and b/client/core/src/styles/fontello.woff2 differ
diff --git a/client/core/src/styles/index.js b/client/core/src/styles/index.js
new file mode 100644
index 000000000..a93f8a6d9
--- /dev/null
+++ b/client/core/src/styles/index.js
@@ -0,0 +1,5 @@
+import './mdl-override.css';
+import './mdi-override.css';
+import './zoom-image.css';
+import './fontello-head.css';
+import './fontello-icons.css';