Icon: Restore default fa-spin to spinner in icon (#77205)

Restore default fa-spin to spinner in icon

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();
+  });
+});

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}
       />