rux-button icon-only - no change in icon size with size prop

[NicDominguez]

Describe the bug When using rux-button as an icon only button I would expect the icon size to grow with the size prop. It does not appear to respond to the size prop except to shift position as the container grows.

To Reproduce Can see issue in Astro storybook https://astro-components.netlify.app/?path=/story/components-button--borderless&args=borderless:false;iconOnly:true;icon:more-vert;disabled:false;size:large;type:button

Current behavior Icon does not change in size at all in response to the prop. Use of shadow parts is necessary for changing size but that introduces issues with positioning inside the button container.

Expected behavior

When in icon-only mode have the icon scale with the size prop.

Screenshots size=small size=medium size=large

CodeSandbox

Environment (please complete the following information):

• Browser [chrome]
• @astrouxds/astro-web-components version [7.0.1]
• Framework, if applicable (React/MUI Box (as a wrapper))
• Framework wrapper version, if applicable (@astrouxds/react)

Additional context This may be intended functionality but I find it unintuitive if the size property is really just padding and the internal text/icon does not scale with the padding.

[dmcalester]

Hey Nick, this is currently the intended behavior for sizing in Astro adjusting padding only. The topic has been broached before, but hadn’t been a priority for investigating further. Aside from it being unintuitive are there other problems it’s causing?

[micahjones13]

I worked with Nic on this one and he found a workaround with the icon shadow part. The difficulty was figuring out MUI syntax to access the part 😆 I believe this is working as intended now that the shadow part is being accessed. Case closed 🕵️