Feature Request: Add icon-size prop to QBtn

[kama7]

I’d like to propose adding an icon-size prop to <q-btn> that allows customizing the size of the icon independently of the button size.

Currently, the icon inside QBtn changes with respect to the button size, while this works in most cases, there are situations where developers want a larger or smaller icon without altering the button size.

Problem: Just to change the icon size, we have to use slots

<q-btn>
      <q-icon left size="3em" name="map" />
      <div>Label</div>
</q-btn>

Proposal: Inline prop icon-size

<q-btn label="Label" icon="map" icon-size="3em" />

Looking forward to feedback! 🙏

[stefanvanherwijnen]

You can use custom content and modify the icon any way you like.

[kama7]

Thanks for the quick reply @stefanvanherwijnen!

So while the slot approach works, in practice it makes the code harder to maintain at scale. Having icon-size as a prop would make it much more ergonomic, especially in large projects with wrapped buttons.

<my-button>
  <q-icon name="img:/icons/home.svg" size="32px" />
  Home
</my-button>

<my-button icon="img:/icons/home.svg" icon-size="32px" label="Home" />

[stefanvanherwijnen]

I'd recommend creating a wrapper component with the custom prop. Your argument is valid, but also applies to the Quasar source code. Including every possible prop would make it a mess.

[shailabsinghha]

Useful feature!