[Bug]: Carbon 11 Button's renderIcon does not position correctly for functions

Package

@carbon/react

Browser

Firefox

Package version

v11

React version

v18

Description

With Carbon 11, you can pass in a size to an icon such that instead of doing this in v10

import { Add24 } from '@carbon/icons-react';

you can do this in v11

import { Add } from '@carbon/react/icons';
...
<Add size={24} />

So here is my issue, before I could pass a Icon object into the renderIcon of a Button component as such

 <Button renderIcon={Add24} />

But if we wanted to use the new carbon 11 way passing in a size as such, you have to use a function for this to work

 <Button renderIcon={() => <Add size={24}>} />

Now I noticed these two different ways the icon position is off.

Using an object (passing in something like Add24)

Passing in a function (() => <Add size={24}>)

The pos is off. I know we can just import bot hAdd and Add24 to solvethis , but wanted to ask if I was doing something wrong or if this was ab ug?

CodeSandbox example

N/A

Steps to reproduce

See Description

Code of Conduct

• I agree to follow this project’s Code of Conduct
• I checked the current issues for duplicate problems

[TannerS]

@TannerS This is due to missing classes on the SVG element, it can be fixed by passing the props to the function component, like this:

renderIcon={props => <Add size={24} {…props}/>}

Yup, this worked. I also learned that, even with the size prop, it doesn’t matter. It appears with a function rendering an icon with a fixed size prop gets ignored and the icon gets set to the size of what the component chooses.

if a function is used, the props appears to be needed as you said.

can this be added in docs somewhere? maybe storybook? I seen others with this issue and no where does it mention passing in props as the functions call back for the renderIcon prop. I feel this would help others, but with that said, my issue has been resolved, thanks @rwibm !

[rwibm]

@TannerS This is due to missing classes on the SVG element, it can be fixed by passing the props to the function component, like this:

renderIcon={props => <Add size={24} {…props}/>}