admin管理员组

文章数量:1332890

The size Quasar Button ponent 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?

The size Quasar Button ponent 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?

• javascript
• vue.js
• vuejs2
• icons
• quasar-framework

Share Improve this question Follow edited Nov 12, 2021 at 18:56 Super Kai - Kazuya Ito 1 asked May 4, 2018 at 9:26 musicformellonsmusicformellons 13.4k55 gold badges5757 silver badges9494 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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 paring to the button itself.

2. The Solution

Here's how I solve it using Deep Selectors. You make a custom button ponent 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 ponent styles. And the changes can also be scoped (only change style locally) if you put the scoped keyword.

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>

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" />

本文标签： javascriptIcon in Quasar Button Component does not change sizeStack Overflow