[LG-5766] fix: Icon fill support

.changeset/polite-turkeys-run.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/icon': patch
+---
+
+Fixed an issue where icons generated through createIconComponent were not passing in fill value correctly

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 '.';
@@ -256,6 +257,18 @@ describe('packages/Icon/createIconComponent', () => {
   });
 });
 
+describe('packages/Icon/Icon', () => {
+  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 computed style has the correct color
+    const computedStyle = window.getComputedStyle(svg!);
+    expect(computedStyle.color).toBe('red');
+  });
+});
+
 describe('Generated glyphs', () => {
   test('Edit icon has displayName: "Edit"', () => {
     expect(EditIcon.displayName).toBe('Edit');

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 {...rest} fill={fill} />;
     } else {
       // TODO: improve fuzzy match
       // Suggest the proper icon casing if there's a near match