clusters-menu

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/icon/icon.scss

@@ -33,18 +33,13 @@
     height: var(--big-size);
   }
 
-  > span {
-    width: 100%;
-    height: 100%;
-  }
-
   // material-icon
   &.material {
-    > span {
+    > .icon {
       font-family: "Material Icons";
       font-size: inherit;
-      font-weight: normal;
-      font-style: normal;
+      font-weight: inherit;
+      font-style: inherit;
       display: inline-block;
       line-height: 1;
       text-transform: none;
@@ -68,6 +63,11 @@
   &.svg {
     box-sizing: content-box;
 
+    > .icon {
+      width: 100%;
+      height: 100%;
+    }
+
     svg {
       pointer-events: none;
       width: 100%;

src/renderer/components/icon/icon.tsx

@@ -87,12 +87,12 @@ export class Icon extends React.PureComponent<IconProps> {
     // render as inline svg-icon
     if (svg) {
       const svgIconText = require("!!raw-loader!./" + svg + ".svg").default;
-      iconContent = <span dangerouslySetInnerHTML={{ __html: svgIconText }}/>;
+      iconContent = <span className="icon" dangerouslySetInnerHTML={{ __html: svgIconText }}/>;
     }
 
     // render as material-icon
     if (material) {
-      iconContent = <span className="material-icons">{material}</span>;
+      iconContent = <span className="icon">{material}</span>;
     }
 
     // wrap icon's content passed from decorator