How to use FontAwesome icons in Menubar?

[agarny]

Hi,

I have integrated FontAwesome icons in my Vue.js app as described in https://docs.fontawesome.com/web/use-with/vue and it's all working fine. IOW, if I have something like <FontAwesomeIcon icon="house" /> then I can see https://fontawesome.com/icons/house?f=classic&s=solid in my app, as expected.

But what if I want to use FontAwesome icons in some PrimeVue components such as Menubar? Say that I have <Menubar :model="items" /> with items equal to:

const emit = defineEmits(['about'])

const items = ref([
  {
    label: 'Help',
    items: [
      {
        label: 'About',
        icon: 'XXX', // <--- What do I put here?...
        command: () => {
          emit('about')
        }
      }
    ]
  }
])

Then, what do I set icon to? Hopefully, I am missing something very obvious...?

Cheers, Alan.