I'm unable to display fontawesome icons in my vuejs app

Question

In my main.js I have:

    import { library } from '@fortawesome/fontawesome-svg-core'
    import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
    import { faFontAwesome } from '@fortawesome/free-brands-svg-icons'
    import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

    library.add(faUserSecret)
    library.add(faFontAwesome)


    Vue.component('font-awesome-icon', FontAwesomeIcon)

In my component I have

     <button class="btn btn-secondary" type="button">
          <font-awesome-icon :icon="['fa', 'fa-search']" />
          <font-awesome-icon :icon="['fas', 'user-secret']" />
     </button>

And I only see the second icon...what am I doing incorrectly here?

Answer 1

I think instead of:

<font-awesome-icon :icon="['fa', 'fa-search']" />

it should be:

<font-awesome-icon :icon="['fa', 'search']" />