0

I am using vuetify 3 with typescript and fontawesome 6.4. Following is my vuetify and fontawesome setup

Vuetify:

import 'vuetify/styles'
import {createVuetify} from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
    components,
    directives
})

Font-Awesome:

import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'

import {
    ...(other icons), faCircleXmark
} from '@fortawesome/free-solid-svg-icons'

import {
    ...(other icons), faTiktok
} from "@fortawesome/free-brands-svg-icons";

import {library} from "@fortawesome/fontawesome-svg-core"

import {useMainStore} from "@/stores/main";

library.add({
   ...(other icons), faCircleXmark
}, fab)

I use then the fa circle xmark icon in a font awesome component like so:

<font-awesome-icon :icon="['fas', 'circle-xmark']"/>

and it works.

However, the same icon does not work when used as input to append-inner-icon prop of a v-text-field like so:

<v-text-field label="Email" density="compact" variant="solo" bg-color="white" v-model="..." @change="..." hide-details :append-inner-icon="['fas', 'circle-xmark']">

Now it is my understanding that the prop does take an array as a value. So could someone explain to me what could be wrong here? There are also no errors in the console to hint that something is wrong

BEvo
  • 357
  • 6
  • 18
  • Not sure but `` fields must not have any child elements. Probably you need a wrapping element or create an icon background image – herrstrietzel Aug 27 '23 at 19:00
  • Thankyou for your response. I believe internally the v-text-field should be placing the icon to the right of any input field it tries to render, and not inside it. – BEvo Aug 27 '23 at 19:11
  • Does append-icon work for you? When I try to replicate your code I can get append-icon to work, but not append-inner-icon... just wondering if you are in the same boat. – courtneymickelsen Aug 29 '23 at 15:36

2 Answers2

0

Not sure if this is the entire problem, but you are missing the second square bracket. Change this:

:append-inner-icon="['fas', 'circle-xmark'"

to this:

:append-inner-icon="['fas', 'circle-xmark']"

And let me know if this changes anything or if it's still not working!

courtneymickelsen
  • 60
  • 8
0

I got it to work once i properly followed the Vuetify guide here: https://vuetifyjs.com/en/features/icon-fonts/#font-awesome-svg-icons

BEvo
  • 357
  • 6
  • 18