Can't bind to 'icon' since it isn't a known property of 'fa-icon'

Question

I am using ngx-share's Share Button Directive in my project. However, I can't seem to be able to use the icons. If I try to use icons like this:

<button mat-fab shareButton="telegram" [style.backgroundColor]="share.prop.telegram.color">
  <fa-icon [icon]="share.prop.telegram.icon" size="lg"></fa-icon>
</button>

What I get is the following error:

Uncaught Error: Template parse errors:
Can't bind to 'icon' since it isn't a known property of 'fa-icon'.
1. If 'fa-icon' is an Angular component and it has 'icon' input, then verify that it is part of this module.
2. If 'fa-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("on mat-fab shareButton="telegram" [style.backgroundColor]="share.prop.telegram.color">
    <fa-icon [ERROR ->][icon]="share.prop.telegram.icon" size="lg"></fa-icon>
  </button>

"): ng:///AppModule/GroupComponent.html@49:13
'fa-icon' is not a known element:
1. If 'fa-icon' is an Angular component, then verify that it is part of this module.
2. If 'fa-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

  <button mat-fab shareButton="telegram" [style.backgroundColor]="share.prop.telegram.color">
    [ERROR ->]<fa-icon [icon]="share.prop.telegram.icon" size="lg"></fa-icon>
  </button>

"): ng:///AppModule/GroupComponent.html@49:4
    at syntaxError (compiler.js:486)
    at TemplateParser.parse (compiler.js:24674)
    at JitCompiler._parseTemplate (compiler.js:34629)
    at JitCompiler._compileTemplate (compiler.js:34604)
    at eval (compiler.js:34505)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34505)
    at eval (compiler.js:34375)
    at Object.then (compiler.js:475)
    at JitCompiler._compileModuleAndComponents (compiler.js:34374)

How can I fix this issue?

---

I added ShareModule to the list of imports:

@NgModule({
  imports: [
    //..
    ShareModule.forRoot()
  ]
})

My component also injects the ShareButtons object as required:

export class GroupComponent {    
  constructor(public share: ShareButtons) {
  }
}

Answer 1

Edit You can also import the ShareButtonModule which already exports the FontAwesomeModule.

Original answer

Assuming you've already installed the font awesome npm package, you need to add FontAwesomeModule to your module's imports

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
 //...
imports: [
     //...
   FontAwesomeModule
  ],
})
export class AppModule { }  

See example here

https://www.npmjs.com/package/@fortawesome/angular-fontawesome

Answer 2

You need to import ShareButtonsModule in the module where you are using these share buttons.

import { ShareButtonsModule } from '@ngx-share/buttons';

@NgModule({
  imports: [
    ShareButtonsModule.forRoot()
  ]
})