When set smaller icons, less surface to click on

[Jonsonmon]

Can the touch surface be the same as the button border? When I set the icon to smaller size (.e.g 28px) the touch area getting smaller too...

[Nerwyn]

You can set the icon and button sizes separately.

remote-button {
  height: 48px;
  width: 48px;

  --size: 24px;
}

[Jonsonmon]

I found the code that worked for me.
But a lot of trial and error to get the correct % .
Code:

remote-button::part(button) {
  --size: 26px;
  padding: 20% 70%;
  margin: -20% -70%;
}

Do you think there is a simpler code for that? It's kind of workaround though

[Nerwyn]

I'm still not sure what you're trying to achieve. The styles I've provided reduce icon size while maintaining the default tap area, and can alternatively reduce ripple size to the icon size.

[Jonsonmon]

When you add

border: solid 1px black;

You will notice the button got bigger
Ripple alone is not enough. I want all the button to be clickable

[Nerwyn]

It's still all clickable to me. Did you mean the corners? If so you could try changing border-radius to a smaller number.

[Jonsonmon]

Nevermind I think the code I previously posted is working best for me.
English is not my native language and it's kind of hard to explain myself...

Thank you for all your hard work.
This card is amazing!!