Pass className to <Icon />

Author: Giacomo Rebonato

packages/buttons/src/views/icon-button/Icon.js

@@ -12,13 +12,17 @@ import ButtonStyles from '@zendeskgarden/css-buttons';
 
 const COMPONENT_ID = 'buttons.icon';
 
-const Icon = ({ children, rotated }) => {
+const Icon = ({ children, className, rotated }) => {
   return React.cloneElement(Children.only(children), {
     'data-garden-id': COMPONENT_ID,
     'data-garden-version': PACKAGE_VERSION,
-    className: classNames(ButtonStyles['c-btn__icon'], {
-      [ButtonStyles['is-rotated']]: rotated
-    })
+    className: classNames(
+      ButtonStyles['c-btn__icon'],
+      {
+        [ButtonStyles['is-rotated']]: rotated
+      },
+      className
+    )
   });
 };
 

packages/buttons/src/views/icon-button/Icon.spec.js

@@ -29,4 +29,14 @@ describe('Icon', () => {
 
     expect(container.firstChild).toHaveClass('is-rotated');
   });
+
+  it('passes className prop', () => {
+    const { container } = render(
+      <Icon className="test">
+        <svg />
+      </Icon>
+    );
+
+    expect(container.firstChild.classList[1]).toBe('test');
+  });
 });