{
  "id": 17979644,
  "title": "Ionicons in Angular: Web Component Fix",
  "url": "https://urgent.news/2026/11/03/ionicons-in-angular-web-component-fix",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-03T15:18:14.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/kevinlearynet/ionicons-in-angular-web-component-fix-fjp"
  },
  "original_language": "en",
  "account": "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.\n\nTo 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.",
  "summary": "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…",
  "key_points": [
    "Developers face issues using Ionicons 4.x with web component syntax in Angular.",
    "Adding CUSTOMELEMENTSSCHEMA suppresses error but fails to load SVG icons.",
    "Installing @ionic/angular module resolves issue by providing access to Ionic components."
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}