Icon not working with vue

Based on the user guide, same code, but not working.

import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
export default {
  components: {
    FontAwesomeIcon
  }
}

<button class="btn btn-primary btn-lg btn-block">
    edit
  <font-awesome-icon icon="edit" />
<button>

Threw error in chrome console: Check not find one or more icon(s) {prefix: "fas", iconName: "edit"} {}

neither this would work:

<button class="btn btn-primary btn-lg btn-block">
    edit
  <font-awesome-icon :icon="['fas', 'edit']" />
<button>

Any explanation ? Thanks.

[OriginalEXE]

Check my post here: https://github.com/FortAwesome/vue-fontawesome/issues/14#issuecomment-351474573

Basically, you also need this:

import '@fortawesome/fontawesome/styles.css';
import fontawesome from '@fortawesome/fontawesome';
import { faEdit } from '@fortawesome/fontawesome-free-solid';

fontawesome.config = {
  autoAddCss: false,
};

fontawesome.library.add(faEdit);

This way you only include the icons you will actually use.

[shaunie2fly]

Not sure if this is ideal but it works for me 😃

import fontawesome from '@fortawesome/fontawesome';
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
import falight from '@fortawesome/fontawesome-pro-light';
import fasolid from '@fortawesome/fontawesome-pro-solid';

fontawesome.library.add(falight, fasolid);

 Vue.component(FontAwesomeIcon.name, FontAwesomeIcon);