Ionicons in Angular: Web Component Fix

Ionicons 4.x provides a web component that you can use to add an icon with <ion-icon name="..."></ion-icon>. Using this web component in an Angular app doesn’t work though, and many developers have reported that Ionicons 4 is broken when used with Angular. If you’ve tried to include Ionicons 4 in your Angular CLI project you’ll likely experience a blank white screen with the following errors in your browser console:

Uncaught Error: Template parse errors:
'ion-icon' is not a known element:
1. If 'ion-icon' is an Angular component, then verify that it is part of this module.
2. If 'ion-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Angular recommends that you add the CUSTOM_ELEMENTS_SCHEMA to your app’s @NgModule.schemas. Doing this will fix the browser error, but icons won’t actually work in your templates. The <ion-icon> tags will appear in your HTML, but the actual SVG icons won’t load.

How to Fix It

To fix this you can load Ionic into your Angular app as a module, which will give you access to all Ionic components in Angular, including <ion-icon>. There’s a built-in Angular schematic that makes the process very simple. Run the following command to add Ionic 4 to an existing Angular CLI project:

ng add @ionic/angular

Once the process is complete you can use Ionicons anywhere in your Angular app using the web component syntax:

<ion-icon name="logo-facebook"></ion-icon>

Continue reading for an explanation of what we’re actually doing here.

Technical Details

The ng add @ionic/angular will install @ionic/angular and import the IonicModule into your app.module.ts, then add it as a module dependency in your app’s @NgModule as IonicModule.forRoot(). The end result will look something like this:

import { IonicModule } from "@ionic/angular";

@NgModule({
  declarations: [...],
  imports: [BrowserModule, AppRoutingModule, IonicModule.forRoot()],
  bootstrap: [AppComponent]
})

The IonicModule contains all components provided with the Ionic library, and if you want you could actually use any of them. Ionicons is released as a stand-alone icons library as well, but the same icon set is part of the the core Ionic library as well.