Using FontAwesomeModule in Ionic3

Ionic Framework ionic-v3
1

I am trying to use Font Awesome 5 in Ionic 3.20.0.
I followed https://fontawesome.com/how-to-use/on-the-web/using-with/angular and installed

  • @fortawesome/angular-fontawesome@0.1.0-10
  • @fortawesome/fontawesome-svg-core@1.2.0
  • @fortawesome/free-solid-svg-icons@5.1.0

then in app.module.ts, I have

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

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FontAwesomeModule,
    IonicStorageModule.forRoot({
      name: '__mydb',
      driverOrder: ['indexeddb', 'sqlite', 'websql']
    }),
    IonicModule.forRoot(MyApp, {tabsHideOnSubPages: true}),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

But when I run the app, it is showing

Uncaught Error: Unexpected value 'undefined' imported by the module 'AppModule'

So why wouldn’t it found FontAwesomeModule?

2

Maybe you will find something in this post? How integrate Font Awesome 5 in Ionic 3

Also I read on the forum that the use of https://github.com/FortAwesome/angular-fontawesome to get FontAwesome 5 is warmly advised

I hope that helps

3

Thank you for replying. I’m trying to avoid using copy.config.js and I followed the forum to use 0.1.0-10 instead of the latest version. Still getting the same problem

4

You are totally right, don’t modify copy.config because you might end up importing all icons where you only want some (see How integrate Font Awesome 5 in Ionic 3)

5

It just suddenly work after I restart the ionic this morning, still don’t get why it failed before.
But thank you for your help.
BTW, do u know if we have anyway to disable the warning like

'faCoffee' is declared but its value is never read.

in the terminal?
It is just annoying that it cannot detect it is being used

6

cool to hear it’s working now :slight_smile:

don’t know sorry, didn’t tried that much font awesome 5

7

How are you writing this? What I do is something like this:

import {faCoffee} from "@fortawesome/pro-light-svg-icons/faCoffee";
export class Page {
  coffeeIcon = faCoffee;
}

<fa-icon [icon]="coffeeIcon"></fa-icon>
1 Like