【问题标题】：Icon in Quasar Button Component does not change sizeQuasar Button 组件中的图标不会改变大小
【发布时间】：2018-05-04 09:26:01
【问题描述】：

Quasar Button 组件的大小可以调整，从docs 看来，按钮中的图标应该相应地改变大小。例如，从文档中查看这张图片：

当我尝试时，图标保持相同大小（按钮更改）。我的代码：

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

怎么了？

【问题讨论】：

标签： javascript vue.js vuejs2 icons quasar-framework

【解决方案1】：

1。问题

我今天遇到了同样的问题。但是，如果您将按钮大小更改为极端数字（例如 200 像素），您会看到图标 DID 随按钮大小发生变化。

问题是图标和按钮之间的默认填充区域太大，这使图标看起来比按钮本身小。

2。解决方案

这是我使用Deep Selectors 解决它的方法。您围绕您的按钮代码制作了一个自定义按钮组件。然后给它以下样式：

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

并且还给模板中的 size 属性赋予相同的大小，所以 size="40px"。然后按钮的所有方面都具有相同的大小。

将 Vue 与 3rd 方 UI 框架/组件一起使用时，Deep Selector 可以非常轻松地快速更改组件样式。如果您输入 scoped 关键字，这些更改也可以限定范围（仅在本地更改样式）。

【讨论】：

我阅读了您提供的深度选择器链接：好东西。我想我确实尝试了巨大的按钮，但仍然有小图标......我将在几天后测试并回来！
迫不及待所以刚刚测试。我必须为关闭按钮创建一个文件组件，以便我可以挑出
如果您想要一个可重复使用的“大小一致的按钮”，您可以创建自己的组件，将包装成您想要的样式，并改用您自己的组件。您还可以在其父页面/组件中专门设置样式。它完全正常，取决于您的需要。
深度选择器不应影响其他按钮 CSS，波纹在我的按钮中就像一个魅力。您使用的是最新的 Quasar 版本吗？
“深度选择器不应影响其他按钮 CSS”。这就是我的行为，即图标很大，但波纹很小（并且仍然有效）。但是我需要波纹随着图标大小而增长，对吧？！顺便说一句，图标所在的窗口出现窗口溢出，可能是因为我的按钮在角落里，并且按钮的填充或容器也很小，因此图标从窗口中长出来......，所以还有填充或其他css'不受影响'...希望我很清楚...我的类星体版本是0.15.10（quasar-cli 015.14）。

【解决方案2】：

我使用了 Quasar v2.0.4。使用 Quasar v2.0.4，您可以使用 size attribute 更改图标（或按钮）的大小。

例如：

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

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

但如果您将 size attribute 与 fab 或 fab-mini attribute 一起使用，size attribute不起作用，那么，只有 fab 或 fab-mini attribute 起作用，而不是 size attribute。

例如：

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

【讨论】：