Size of icon button

[tvojtech]

Hi,

I have code like

<Button
  onClick={() => toggleDrawer()}
  aria-label="Open menu"
  className="lg:hidden"
  variant="link"
  size="icon"
  >
    <Menu /> // icon from lucide-react
</Button>

How can I make the icon bigger? size prop of the icon does not work. Setting width and height via className does not work on the icon or the button. The icon is still small. Can I somehow make it bigger?

[Chukwu3meka]

You can use the fontSize property

<Menu style={{fontSize: 40 // '40px' }} /> 

[HafidzNurmawanHakim]

you can use scale instead

<Bell className="scale-125" />
or
<Bell style={{ scale: 2 }} />

[katongole-isaac]

I also faced the same issue. I ignore the Button and used div

<div role="button" > <Menu size={30} /> </div> // it works fine

[jdgamble555]

The button base class is configured with the svg icon size, not intuitive at all. You can replace it with:

<Button href={`/deck/${id}/${slug}`} variant="ghost" class="[&_svg]:size-6">
	<X />
</Button>

J