diff --git a/UI/WebServerResources/scss/components/icon/_extends.scss b/UI/WebServerResources/scss/components/icon/_extends.scss
new file mode 100644
index 000000000..59d1482f5
--- /dev/null
+++ b/UI/WebServerResources/scss/components/icon/_extends.scss
@@ -0,0 +1,28 @@
+///
+/// @filename _extends.scss
+/// @project SOGo
+/// @version 3.alpha
+/// @module icon
+///
+/// Imports Material Design Iconic Font 1.0.1 from Bower components for extends
+/// Sources must be imported here to prevent overrides by updates
+/// The source scss MUST be customized it contains mixin that caused dammages
+/// if not compiled in a specific order
+/// todo : build with grunt
+///
+$md-icon-src-path: "../../../bower_components/material-design-iconic-font/scss/";
+@import "../../../bower_components/material-design-iconic-font/scss/_variables";
+// variables in source are not defaulted, we MUST override here
+// relative (to css) path for src fonts
+$md-font-path: "../bower_components/material-design-iconic-font/fonts";
+// the source file declare "md" !!!
+$md-css-prefix: md-icon;
+@import "../../../bower_components/material-design-iconic-font/scss/_mixins";
+@import "../../../bower_components/material-design-iconic-font/scss/_path";
+@import "../../../bower_components/material-design-iconic-font/scss/_core";
+@import "../../../bower_components/material-design-iconic-font/scss/_sizes";
+@import "../../../bower_components/material-design-iconic-font/scss/_border";
+@import "../../../bower_components/material-design-iconic-font/scss/_pulled";
+@import "../../../bower_components/material-design-iconic-font/scss/_spinned";
+@import "../../../bower_components/material-design-iconic-font/scss/_rotated";
+@import "../../../bower_components/material-design-iconic-font/scss/_icons";
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/icon/icon.js b/UI/WebServerResources/scss/components/icon/icon.js
deleted file mode 100644
index e43b8d1c5..000000000
--- a/UI/WebServerResources/scss/components/icon/icon.js
+++ /dev/null
@@ -1,44 +0,0 @@
-(function() {
-'use strict';
-
-/*
- * @ngdoc module
- * @name material.components.icon
- * @description
- * Icon
- */
-angular.module('material.components.icon', [
-  'material.core'
-])
-  .directive('mdIcon', mdIconDirective);
-
-/*
- * @ngdoc directive
- * @name mdIcon
- * @module material.components.icon
- *
- * @restrict E
- *
- * @description
- * The `<md-icon>` directive is an element useful for SVG icons
- *
- * @usage
- * <hljs lang="html">
- *  <md-icon icon="/img/icons/ic_access_time_24px.svg">
- *  </md-icon>
- * </hljs>
- *
- */
-function mdIconDirective() {
-  return {
-    restrict: 'E',
-    template: '<object class="md-icon"></object>',
-    compile: function(element, attr) {
-      var object = angular.element(element[0].children[0]);
-      if(angular.isDefined(attr.icon)) {
-        object.attr('data', attr.icon);
-      }
-    }
-  };
-}
-})();
diff --git a/UI/WebServerResources/scss/components/icon/icon.scss b/UI/WebServerResources/scss/components/icon/icon.scss
index 5d7615c73..825bde51a 100644
--- a/UI/WebServerResources/scss/components/icon/icon.scss
+++ b/UI/WebServerResources/scss/components/icon/icon.scss
@@ -1,18 +1,27 @@
+///
+///
+/// @filename _icon.scss
+/// @project SOGo
+/// @version 3.alpha
+///
+/// Main icon module file extends Bower component
+///
+///
+
+@import 'extends';
+/**
+  MD-ICONS
+  Usage: place Material Design Iconic Font icons on almost any elemnt using the Prefix md-icon
+  and the icon's name (http://zavoloklom.github.io/material-design-iconic-font/icons.html)
+  exemple : <i class="md-icon-more-horiz></i>
+
+  To increase icon sizes relative to their container, append lg, 2x, 3x, 4x, or 5x to the icon class.
+  exemple : <i class="md-icon-more-horiz-2x></i>
+
+  To arbitrarily rotate and flip icons, use the md-icon-rotate-* and md-icon-flip-* classes.
+
+  Other features at : http://zavoloklom.github.io/material-design-iconic-font/examples.html
+*/
+
 
-md-icon {
-  margin: auto;
-  padding: 0;
-  display: inline-block;
-  margin-top: 5px;
-  background-repeat: no-repeat no-repeat;
-  pointer-events: none;
-}
-svg, object {
-  fill: currentColor;
-  color: currentColor;
-}
 
-md-class-icon {
-  // display: block;
-  // margin: 0 auto;
-}
diff --git a/UI/WebServerResources/scss/components/icon/icon.spec.js b/UI/WebServerResources/scss/components/icon/icon.spec.js
deleted file mode 100644
index 9de75b49c..000000000
--- a/UI/WebServerResources/scss/components/icon/icon.spec.js
+++ /dev/null
@@ -1,2 +0,0 @@
-describe('mdIcon directive', function() {
-});
diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss
index 373e0b84e..85980b656 100755
--- a/UI/WebServerResources/scss/styles.scss
+++ b/UI/WebServerResources/scss/styles.scss
@@ -35,9 +35,9 @@
 
 
 
-// Icons -
+// Material Design Iconic Font 1.0.1 (http://zavoloklom.github.io/material-design-iconic-font/)
 // ------------------------------------------------------------------------------
-// fixme : implement icon-font module
+@import 'components/icon/icon.scss';
 
 
 // @import '../angular-material/src/core/style/color-palette.scss';