From a3e68eef17703dae0f0789fcbf8cac6e8e7c9bdc Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 17 May 2022 11:03:35 +0100
Subject: [PATCH] IconButton: IconButtons are now correctly aligned in Safari
 (#48759)

* fix icon alignment in safari

* add comment
---
 packages/grafana-ui/src/components/Icon/Icon.tsx             | 3 ++-
 packages/grafana-ui/src/components/IconButton/IconButton.tsx | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx
index 230a82a2c26..bd4a53accbc 100644
--- a/packages/grafana-ui/src/components/Icon/Icon.tsx
+++ b/packages/grafana-ui/src/components/Icon/Icon.tsx
@@ -20,14 +20,15 @@ export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const getIconStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
+    // line-height: 0; is needed for correct icon alignment in Safari
     container: css`
       label: Icon;
       display: inline-block;
+      line-height: 0;
     `,
     icon: css`
       vertical-align: middle;
       display: inline-block;
-      margin-bottom: ${theme.spacing.xxs};
       fill: currentColor;
     `,
     orange: css`
diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.tsx
index dfddd2b1c9e..137dfe14369 100644
--- a/packages/grafana-ui/src/components/IconButton/IconButton.tsx
+++ b/packages/grafana-ui/src/components/IconButton/IconButton.tsx
@@ -154,7 +154,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, size: IconSize, variant:
       }
     `,
     icon: css`
-      margin-bottom: 0;
       vertical-align: baseline;
       display: flex;
     `,