如何更改 vuetify "append-outer-icon" 大小？

Question

当图标作为“append-outer-icon”插入时，我找不到更改图标大小的方法

<div>
    <v-col
        cols="12"
    >
        <v-text-field
            class="mx-8"
            v-model="message4"
            label="Outlined"
            outlined
            clearable
            append-outer-icon="mdi-plus-circle-outline large"
        ></v-text-field>
    </v-col>
  </div>

Answer 1

您可以为该图标使用插槽，查看文档 https://vuetifyjs.com/en/api/v-text-field/#events append-outer 插槽是你需要的，你可以将 v-icon 传递给它并通过 v-icon 文档中描述的道具更改图标的大小。

Answer 2

一种方法是使用 CSS。图标的大小由 font-size:

设置

.v-input__icon.v-input__icon--append-outer i {
  font-size: 48px;
}

demo

如何更改 vuetify "append-outer-icon" 大小？

How to change vuetify "append-outer-icon" size?

vue.js

vuetify.js