CODEWITHSUNDEEP
vue.jsvuetify.js
Alex DS
Alex DS

Reputation: 101

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

I Could not find a way to change the icon size when it is inserted as "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>

scrennshot

Upvotes: 1

Views: 3479

Answers (3)

scipilot
scipilot

Reputation: 7447

In Vuetify 3 you can use

Global configuration - where you can target props for any component in the entire app. https://vuetifyjs.com/en/features/global-configuration/#global-configuration

Defaults Provider - where you can wrap an area of your app in particular defaults https://vuetifyjs.com/en/components/defaults-providers/

Slots - as mentioned by Witold, where you have more flexibility to redefine the entire icon, or even replace it with something else. https://vuetifyjs.com/en/components/text-fields/#slots

Or to tweak the CSS, you can use the above global configuration to add CSS classes in which you make your changes, without hacking into the Vuetify internal CSS. https://vuetifyjs.com/en/features/global-configuration/#global-class-and-styles

e.g.

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

export default {
    data: () => ({
        myLocalDefaults: {
            VTextField: {
              VIcon: {size: "small", theme:"secondary", color:"pink"}, 
            }
        }
    })
}

Upvotes: 0

tony19
tony19

Reputation: 138266

One way to do that is with CSS. The icon's size is set by font-size:

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

demo

Upvotes: 1

Witold
Witold

Reputation: 71

You can use slot for that icon, check documentation https://vuetifyjs.com/en/api/v-text-field/#events append-outer slot is what you need, you can pass v-icon into it and change size of icon by prop described in v-icon documentation.

Upvotes: 2

Related Questions