From 5949865a458c6dc592f0655dbfa884a78175f170 Mon Sep 17 00:00:00 2001
From: TatianaLopaeva <talopaeva@gmail.com>
Date: Sat, 20 Feb 2021 18:37:32 +0300
Subject: [PATCH] Web: Components: Fix problem with click om icon, added size
 style.

---
 .../src/components/icon-button/index.js       | 10 +++-----
 .../icon-button/styled-icon-button.js         | 23 +++++++++++++------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/asc-web-components/src/components/icon-button/index.js b/packages/asc-web-components/src/components/icon-button/index.js
index a67cdde46a..f5a11d41cf 100644
--- a/packages/asc-web-components/src/components/icon-button/index.js
+++ b/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>
     );
diff --git a/packages/asc-web-components/src/components/icon-button/styled-icon-button.js b/packages/asc-web-components/src/components/icon-button/styled-icon-button.js
index 0a65e0d96f..0c132808ca 100644
--- a/packages/asc-web-components/src/components/icon-button/styled-icon-button.js
+++ b/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) =>
-  props.size ? Math.abs(parseInt(props.size)) + "px" : "20px"};
-cursor: ${(props) =>
-  props.isDisabled || !props.isClickable ? "default" : "pointer"};
-line-height: 0;
--webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  width: ${(props) =>
+    props.size ? Math.abs(parseInt(props.size)) + "px" : "20px"};
+  cursor: ${(props) =>
+    props.isDisabled || !props.isClickable ? "default" : "pointer"};
+  line-height: 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;
\ No newline at end of file
+export default StyledOuter;