Web: Components: Fix problem with click om icon, added size style.

packages/asc-web-components/src/components/icon-button/index.js

@@ -138,7 +138,7 @@ class IconButton extends React.PureComponent {
       style,
       dataTip,
     } = this.props;
-    console.log("input-block");
+  
     return (
       <StyledOuter
         className={className}
@@ -154,6 +154,7 @@ class IconButton extends React.PureComponent {
         data-event="click focus"
         data-for={id}
         style={style}
+        color={this.state.currentIconColor}
         //{...this.props}
       >
         {/* {React.createElement(Icons["CalendarIcon"], {
@@ -163,13 +164,8 @@ class IconButton extends React.PureComponent {
         })} */}
 
         <ReactSVG
+          className="icon-button_svg"
           src={this.state.currentIconName}
-          beforeInjection={(svg) => {
-            //const [firstGElement] = [...svg.querySelectorAll("path")];
-            svg
-              .querySelector("path")
-              .setAttribute("fill", this.state.currentIconColor);
-          }}
         />
       </StyledOuter>
     );

packages/asc-web-components/src/components/icon-button/styled-icon-button.js

@@ -1,12 +1,21 @@
 import styled from "styled-components";
 
 const StyledOuter = styled.div`
-width: ${(props) =>
+  width: ${(props) =>
-  props.size ? Math.abs(parseInt(props.size)) + "px" : "20px"};
+    props.size ? Math.abs(parseInt(props.size)) + "px" : "20px"};
-cursor: ${(props) =>
+  cursor: ${(props) =>
-  props.isDisabled || !props.isClickable ? "default" : "pointer"};
+    props.isDisabled || !props.isClickable ? "default" : "pointer"};
-line-height: 0;
+  line-height: 0;
--webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  svg {
+    &:not(:root) {
+      width: 100%;
+      height: 100%;
+    }
+    path {
+      fill: ${(props) => props.color};
+    }
+  }
 `;
 
-export default StyledOuter;
+export default StyledOuter;