Button: iconSize prop doesn't work with some icons #43745
Description
Description
I have found that the size is not applied to some of the @wordpress/icons when I specify the iconSize attribute on a button component with SVG icons.
These icons will be displayed at the expected size when the size is specified in the Icons component, not the Button component.
I checked the icon library and found that icons with width / height attributes of the svg element match those with no size applied. I don't know why these icons don't reproduce when used in the Icons component, but I think SVG icons should be rendered at the size specified in the Icons component and the width / height attributes are unnecessary on the svg element.
The following are those icons:
Step-by-step reproduction instructions
I have rewritten edit.js in the code block to include code that designates all icons in @wordpress/icons as buttons:
import { useBlockProps } from '@wordpress/block-editor';
import * as Icons from '@wordpress/icons';
import { Button, Flex } from '@wordpress/components';
const { Icon, ...availableIcons } = Icons;
export default function CodeEdit() {
const blockProps = useBlockProps();
return (
<div { ...blockProps }>
<Flex
wrap="wrap"
justify="flex-start"
style={ { textAlign: 'center', fontSize: '8px' } }
>
{ Object.entries( availableIcons ).map( ( [ name, icon ] ) => {
return (
<div key={ name } style={ { width: '5%' } }>
<Button icon={ icon } iconSize={ 40 } />
</div>
);
} ) }
</Flex>
</div>
);
}Screenshots, screen recording, code snippet
The icon circled in red has width and height specified for the svg element and the iconSize property is not applied.
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes