如何改变“附加-外部图标”的大小？

Question

当图标插入为“追加-外部图标”时，我找不到改变图标大小的方法。

<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

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

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

演示

Answer 2

您可以为该图标使用插槽，检查文档https://vuetifyjs.com/en/api/v-text-field/#events附加-外部插槽是您所需要的，您可以将v图标传递到其中，并通过v图标文档中描述的工具更改图标的大小。