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…
In Angular, developers often encounter issues when trying to use Ionicons 4.x with the web component syntax. This can result in a blank white screen and browser errors indicating that "ion-icon" is not a known element. While adding the CUSTOM_ELEMENTS_SCHEMA to the @NgModule.schemas can suppress the error, it will not actually load the SVG icons.
To resolve this issue, one must load Ionic into the Angular app as a module, which provides access to all Ionic components, including Ionicons. This can be done using the ng add @ionic/angular command in an existing Angular CLI project. The process involves installing @ionic/angular, importing the IonicModule into the app.module.ts file, and adding it as a module dependency in the app’s @NgModule using the Ionic.forRoot() method.
The final result will include the necessary imports and components from the Ionic library, allowing the use of Ionicons as web components in the Angular app.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
