From db40c90eedee8cc55fd9ed31bdbe70ffe728fcd6 Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Thu, 26 Oct 2023 12:17:39 +0000
Subject: [PATCH] Icon: Restore default fa-spin to spinner in icon (#77205)

Restore default fa-spin to spinner in icon
---
 .../grafana-ui/src/components/Button/Button.test.tsx  | 11 +++++++++++
 packages/grafana-ui/src/components/Icon/Icon.tsx      |  9 ++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 packages/grafana-ui/src/components/Button/Button.test.tsx

diff --git a/packages/grafana-ui/src/components/Button/Button.test.tsx b/packages/grafana-ui/src/components/Button/Button.test.tsx
new file mode 100644
index 00000000000..68d4e1e55c4
--- /dev/null
+++ b/packages/grafana-ui/src/components/Button/Button.test.tsx
@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { Button } from './Button';
+
+describe('Button', () => {
+  it('spins the spinner when specified as an icon', () => {
+    const { container } = render(<Button icon="spinner">Loading...</Button>);
+    expect(container.querySelector('.fa-spin')).toBeInTheDocument();
+  });
+});
diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx
index b0388e6da11..8e08714225c 100644
--- a/packages/grafana-ui/src/components/Icon/Icon.tsx
+++ b/packages/grafana-ui/src/components/Icon/Icon.tsx
@@ -51,6 +51,13 @@ export const Icon = React.forwardRef<SVGElement, IconProps>(
     const subDir = getIconSubDir(iconName, type);
     const svgPath = `${iconRoot}${subDir}/${iconName}.svg`;
 
+    const composedClassName = cx(
+      styles.icon,
+      className,
+      type === 'mono' ? { [styles.orange]: name === 'favorite' } : '',
+      iconName === 'spinner' && 'fa-spin'
+    );
+
     return (
       <SVG
         innerRef={ref}
@@ -58,7 +65,7 @@ export const Icon = React.forwardRef<SVGElement, IconProps>(
         width={svgWid}
         height={svgHgt}
         title={title}
-        className={cx(styles.icon, className, type === 'mono' ? { [styles.orange]: name === 'favorite' } : '')}
+        className={composedClassName}
         style={style}
         {...rest}
       />