Quasar按钮组件图标大小不随按钮尺寸变化问题排查

我来帮你排查这个问题～

你遇到的核心问题是自定义像素尺寸的size属性不会自动同步图标的大小。Quasar按钮组件的size属性如果使用预设值（比如xs、sm、md这类），会同时作用于按钮本身和内部的图标，实现同步缩放；但如果像你这样直接传入自定义像素值（15px），组件只会调整按钮的padding和整体尺寸，并不会自动修改图标的字体大小（Quasar图标本质是字体图标，靠font-size控制尺寸）。

两种解决办法： #

1. 使用Quasar预设的size值（推荐）

换成官方提供的预设尺寸，图标会自动跟着按钮缩放，比如最小的xs：

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

预设尺寸对应的大小完全符合Quasar的设计规范，不用手动调整图标，省心又统一。

2. 自定义尺寸时手动指定图标大小

如果必须用15px这种自定义按钮尺寸，那就通过icon-size属性给图标设置匹配的大小（数值可以根据视觉效果调整，比如比按钮尺寸小一点）：

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

另外，dense属性已经会让按钮的内部间距更紧凑，和size配合使用能达到更小巧的视觉效果～

内容的提问来源于stack exchange，提问作者musicformellons