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.

Meet the Author

Kevin Leary, Boston WordPress Developer of 10 Years

I'm a freelance web developer and WordPress consultant in Boston, MA with 13 years of experience building websites and applications. View a portfolio of my work or request an estimate for your next project.