How do you resize an icon button?

[treeder]

I see I can change the icon size, but it doesn't appear to change the button size (the unseen part). Is there a way to change the button size?

[asyncLiz]

I believe you can use --md-icon-button-container-width and --md-icon-button-container-height.

You can also set width and height directly on the <md-icon-button>.

[treeder]

Neither of those work for me:

With: --md-icon-button-icon-size: 20px; width: 20px; and height: 20px;, the icon is 20px, but the button is still 48px. Video:

Screen.recording.2024-01-29.3.46.57.PM.webm

Same with --md-icon-button-icon-size: 20px; --md-icon-button-container-width: 20px; --md-icon-button-container-height: 20px;

Screen.recording.2024-01-29.3.49.12.PM.webm

Though the second one works better with align-items: center; since it's actually centered.

[asyncLiz]

The 48px x 48px square is the touch target for accessibility. It doesn't change the layout size of the button (it's still 20px x 20px). You can remove it by adding a touch-target="none" attribute, though this makes the button harder to click.

See https://lit.dev/playground/#gist=2b3d94601f34424c5524bcb14876459b for a demo.