Icon in Quasar Button Component does not change size

Question

The size Quasar Button component can be adjusted and from docs it seems the icon in a button should change size accordingly. See this picture for example from the docs:

When I try the icon stays same size (button changes). My code:

    <q-btn
      v-if="$route.name === 'resetpassword'"
      class="absolute-top-right"
      flat
      round
      wait-for-ripple
      dense
      size="15px"
      color="primary"
      icon="mdi-window-close"
      @click.native="goToSignIn"
    />

What's wrong?

Answer 1

1. The Problem

I ran into the same problem today. But if you change the button size to an extreme number (eg 200px), you'll see that the icon DID change size with the button.

The problem is that the default padding area between the icon and the button is too big, which makes the icon look small comparing to the button itself.

2. The Solution

Here's how I solve it using Deep Selectors . You make a custom button component around your button code. Then give it following style:

<style scoped>
.q-btn>>>.q-icon {
  font-size: 40px;
}
</style>

And also give the size attribute in your template the same size, so size="40px" . Then all aspects of the button have same size.

When using Vue with 3rd party UI Frameworks/Components, Deep Selector makes it really easy to make quick changes to component styles. And the changes can also be scoped (only change style locally) if you put the scoped keyword.

Answer 2

I used Quasar v3.0.4 . With Quasar v3.0.4 , you can change the icon(or button) size with size attribute .

For example:

<q-btn size="xl" icon="close" />

<q-btn size="100px" icon="close" />

But if you use size attribute with fab or fab-mini attribute , size attribute doesn't work. Instead, fab or fab-mini attribute works.

For example:

<q-btn size="xl" fab icon="close" />

<q-btn size="100px" fab-mini icon="close" />

Answer 3

I understand that the topic is old, but nevertheless, good solution is use q-icon inside q-btn for changing size of icon.

<q-btn size="xs" color="primary" dense>
    <q-icon name="add" size="15px"></q-icon>
</q-btn>