CODEWITHSUNDEEP
javascriptcssvue.jsvuetify.js
user745587
user745587

Reputation: 125

How to create space between icon and text field with Vuetify

I have the following code for the username section:

<v-text-field
         prepend-icon="fas fa-user"
         height="60px"
         placeholder="Username"
         outlined
></v-text-field>

How can I create space between the user icon and the text field?

While I'm here I might as well also ask how I can make the width of the input field adjust to the width of the screen? Right now it's very small for some reason.

enter image description here

Upvotes: 0

Views: 3526

Answers (1)

Anees Hameed
Anees Hameed

Reputation: 6544

You need to add icon onto prepend slot and then add margin-x

<v-text-field
  label="Regular"
  solo
  >
  <template v-slot:prepend>
    <v-icon class="mx-5">mdi-account</v-icon>
  </template>
</v-text-field>

Upvotes: 4

Related Questions