[Enhancement]: `renderIcon` prop needs to allow adjusting icon size

[NashJames]

Package

carbon-components, carbon-components-react, @carbon/icons

Browser

No response

Package version

10.50.0, 7.51.0, 7.0.7

Description

Icons used in components are regularly too small. Especially for teams concious that they have users with poor eyesight.

So, we obviously adjust the SVG width and height with CSS. This kicks in anti-aliasing, so icons looked blurred. It's a shame because the iconset has been created in multiple sizes.

This is problem is also obvious on a lot of popular external IBM products like https://cloud.ibm.com/

Screenshots

It's not very obvious from screenshots, but I've attached some anyway.

16px --------- 20px -------- 24px

Steps to reproduce

Any component with renderIcon. Very visible on components with multiple icons like SideNav

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[tw15egan]

cc @carbon-design-system/design

[tay1orjones]

@NashJames Here's how to configure the size of an icon within renderIcon:

<MyComponent renderIcon={props => <Search size={16} {...props} />} />

More info is available in the v11 migration guide.

[NashJames]

Thanks @tay1orjones. Does this work in v10? I receive no warnings but the icons don't seem to render any larger

Also, can I suggest adding the example here: https://carbondesignsystem.com/guidelines/icons/code/. A migration guide isn't exactly the place I would have thought to look for that info

[tay1orjones]

@NashJames Ah sorry I totally missed you stating v10 in the original issue body. size was indeed added in v11. In v10 you import the size of icon you need by name to use within renderIcon:

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

https://carbondesignsystem.com is current for the latest release.

We have the v10 version still up at https://v10.carbondesignsystem.com

[NashJames]

@tay1orjones Funnily enough, that's not actually an issue.

Apologies I listed the wrong icon library and version above (looks like it snuck into the package.json a long time ago without being used at all).

We're actually using @carbon/icons-react at v11.13.0 because it has TS definitions.

Now I remember our icons are v11, that's probably the issue. v10 renderIcon is likely not setup to handle it.

Happy for this to remain closed.

Don't want to waste your time further looking into mismatched versions not interacting properly.