Vuetify append-inner-icon with fontawesome

Question

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

Answer 1

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