Is there a way to set a Q-btn icon size independent of the button size?
-
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.
-
You can try putting the icon in QBtn’s default slot as a QIcon and adjust its style accordingly.
Scott
-
font-size: 2em!important
-
@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?
-
Can you make a codepen of your use case?
Scott
-
Mixing icon sets in a app let alone a single component is considered to be a bad practice.
-
@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
-
@CWoodman you are using a pre v1 version. Fork the codepen from docs in the
Toolsmenu 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.
-
@metalsadman Thanks. Here’s the new codepen:
https://codepen.io/crawfordw/pen/KKVjoBK
-
-
Ah there’s a
stackproperty in q-btn. It is buried quite deep in the docs. There’s 1 example but you really have to look for it…
-
@CWoodman @s-molinari 's solution should be it, since you are using default slot.
-
Yes that works. Thanks Scott! You guys are the best!
-
@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.
