CODEWITHSUNDEEP
javascriptvue.jsvuejs2iconsquasar-framework
musicformellons
musicformellons

Reputation: 13423

Icon in Quasar Button Component does not change size

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: enter image description here

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?

Upvotes: 1

Views: 8986

Answers (3)

unreal_serg
unreal_serg

Reputation: 31

A good solution is to use q-icon inside q-btn for changing the size of the icon.

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

Upvotes: 3

Super Kai - Kazuya Ito
Super Kai - Kazuya Ito

Reputation: 1

I used Quasar v2.0.4. With Quasar v2.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, then, only fab or fab-mini attribute works instead of size attribute.

For example:

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

Upvotes: 0

user2875289
user2875289

Reputation: 2929

1. The Problem

I ran into the same problem today. But if you change the button size to an extreme number (e.g. 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.

Upvotes: 3

Related Questions