[LG-5766] fix: Icon fill support

packages/icon/src/Icon.spec.tsx

@@ -9,6 +9,7 @@ import { typeIs } from '@leafygreen-ui/lib';
 
 import EditIcon from './generated/Edit';
 import { Size } from './glyphCommon';
+import { Icon } from './Icon';
 import { isComponentGlyph } from './isComponentGlyph';
 import { SVGR } from './types';
 import { createGlyphComponent, createIconComponent, glyphs } from '.';
@@ -245,6 +246,16 @@ describe('packages/Icon/createIconComponent', () => {
       const glyph = getByTestId('my-glyph');
       expect(glyph).toHaveAttribute('role', 'presentation');
     });
+
+    test('`fill` prop applies CSS color correctly', () => {
+      const { container } = render(<Icon glyph="Edit" fill="red" />);
+      const svg = container.querySelector('svg');
+      expect(svg).toBeTruthy();
+      // The fill prop should be applied as a CSS color via emotion
+      // We check that the SVG has a className (from emotion) and the computed style
+      const computedStyle = window.getComputedStyle(svg!);
+      expect(computedStyle.color).toBe('red');
+    });
   });
 
   test('returned Icon function logs an error when glyph does not exist', () => {

packages/icon/src/createIconComponent.tsx

@@ -27,11 +27,11 @@ type GlyphObject = Record<string, LGGlyph.Component>;
 export function createIconComponent<G extends GlyphObject = GlyphObject>(
   glyphs: G,
 ) {
-  const Icon = ({ glyph, ...rest }: IconProps) => {
+  const Icon = ({ glyph, fill, ...rest }: IconProps) => {
     const SVGComponent = glyphs[glyph];
 
     if (SVGComponent) {
-      return <SVGComponent {...rest} />;
+      return <SVGComponent fill={fill} {...rest} />;
     } else {
       // TODO: improve fuzzy match
       // Suggest the proper icon casing if there's a near match