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



  • 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…



  • 0.15 fixes this



  • @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.