[Solved] Flat Button Icons Not Centered When Running 'quasar build'

[snowdrop]

Good day. Im currently using Quasar v.0.14.7. The flat buttons are centered correctly in dev mode but running ‘quasar build’ displays this:

https://imgur.com/8Sq6oEv
https://imgur.com/SRSPeDL

Sample code I’ve used is shown below:

<q-btn small flat round @click="$router.go($router.currentRoute)">
   <q-icon name="refresh" size="30px"/>
   <q-tooltip anchor="center left" self="center right" :offset="[10, 10]">
      Refresh
   </q-tooltip>
</q-btn>

Any idea how to fix this? Other types of buttons seems OK though. Thanks

Update: Seems that disabling the height and width of ‘.q-btn-round.q-btn-small .q-icon’ corrects this behavior. I have no idea what might be causing this though. Still investigating…

[benoitranque]

0.15 fixes this

[snowdrop]

@benoitranque I’m not sure but upgrading now might have breaking changes on my code. I’ve discovered a solution for v0.14.7. Declaring import 'quasar-extras/material-icons' above the require(`./themes/app.${__THEME}.styl`) or require(`quasar/dist/quasar.${__THEME}.css`) in main.js file fixes it.