btn-icon padding

[SergkeiM]

Current Behavior

Currently when using .btn-icon

<button class="btn-icon">
	<Icon icon={mdiMenu}/>
</button>

Has width and padding:

padding-left: 1.25rem;
padding-right: 1.25rem;
width: 43px;

Above leaves 0 space for indside content so the icon is not visible

Steps To Reproduce

As said above

Anything else?

I suggest removing padding .btn-icon as there is already width and flex/text alignment in place. ( So is not BC)

[Sarenor]

As you can see in the docs https://www.skeleton.dev/elements/buttons

Icon buttons work.

Could you share a bit more of your code like the content of the Icon Component?

[bennymi]

Did you try giving your icon a size? If you're using iconify icons it might be because of that.

<button class="btn-icon">
	<Icon icon={mdiMenu} class="text-2xl" />
</button>

[endigo9740]

Closing due to inactivity. Feel free to share a specific code example if Benny's tip above didn't resolve your issue.

[Sarenor]

	<button class="btn-icon variant-filled" type="button">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-2xl">
			<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10">
			</path>
		</svg>
	</button>

Thanks to ak4zh on Discord we finally have a reproduction that works and shows the problem, even with Benny's text-2xl suggestion!

The problem stems from using SVGs that are automatically scaled to fit and the paddings applied in button-base-style shrinking that fit to about 3 px wide.

[Sarenor]

@SergkeiM I assume your Icon-Component directly renders an SVG as well. Until we figured out a solution, you can wrap your Icon in a <span> with explicitly set dimensions like so:

<button class="btn-icon">
  <span class="w-6 h-6">
    <Icon icon={mdiMenu}/>
  </span>
</button>