Is there a way to set a Q-btn icon size independent of the button size?

[CWoodman]

I’m using a mix of FontAwsome and MDI icons on button toolbars. The MDI icons tend to be smaller than the FA ones. I need a way to change the icon size without changing the overall button size, since I want all the labels to be the same font-size.

[s.molinari]

You can try putting the icon in QBtn’s default slot as a QIcon and adjust its style accordingly.

Scott

[Hawkeye64]

font-size: 2em!important

[CWoodman]

@s-molinari Thanks, that works to set the size. But now my stacked button has the label above the icon instead of below it. Any suggestion how to overcome this?

[s.molinari]

Can you make a codepen of your use case?

Scott

[dobbel]

Mixing icon sets in a app let alone a single component is considered to be a bad practice.

[CWoodman]

@s-molinari Scott, I tried to show in a codepen, but the ‘stack’ prop doesn’t seem to work there.
https://codepen.io/crawfordw/pen/MWKdyMW

[metalsadman]

@CWoodman you are using a pre v1 version. Fork the codepen from docs in the Tools menu and edit it. This codepen https://codepen.io/rstoenescu/pen/VgQbdx. For the icon cdn’s copy paste the urls from here https://quasar.dev/start/umd#Installation into your codepen css settings.

[CWoodman]

@metalsadman Thanks. Here’s the new codepen:
https://codepen.io/crawfordw/pen/KKVjoBK

[s.molinari]

Does that work?

https://codepen.io/smolinari/pen/mdVZLxN

Scott

[dobbel]

Ah there’s a stack property in q-btn. It is buried quite deep in the docs. There’s 1 example but you really have to look for it…

[metalsadman]

@CWoodman @s-molinari 's solution should be it, since you are using default slot.

[CWoodman]

Yes that works. Thanks Scott! You guys are the best!

[metalsadman]

@dobbel woudnt hurt to try it on a codepen for others in the api that doesnt have specific example. P.Rs would be great =p, maybe an interactive one, where you can check/tick the list of props and see the effects.