Issue with IonIcons Not Displaying in Ionic Angular Standalone Components

Question

I am currently working on an Ionic Angular project that utilizes standalone components. I've encountered an issue where IonIcons are not rendering properly in my templates. My project is built with Angular 17 and Ionicons 7.

The following icon usage in my template results in a warning:

<ion-icon name="log-out-outline" slot="start"></ion-icon>

The warning displayed is:

[Ionicons Warning]: Could not load icon with name "log-out-outline". Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to the icon component.

As a workaround, I tried manually importing the icons like this:

import { camera } from 'ionicons/icons';
//...
export class HomePageComponent implements OnInit {
  camera = camera;
  // ...
}

// In template
<ion-icon [icon]="camera" slot="icon-only" fill="outline"></ion-icon>

While this approach works, it's not ideal, especially when dealing with numerous icons, as it makes the code less clean and more difficult to manage.

I suspect that there might be a need for a specific import or configuration to properly use IonIcons in this setup. Has anyone faced a similar issue or can provide guidance on how to correctly import and use IonIcons in an Ionic Angular project with standalone components?

Hooge

https://mcmap.net/q/1327688/-ionicons-are-not-displayed-in-ionic-7-1-1-angular-17-0-8 – Shithead

Answer 1

you need to import

import { logOutOutline } from 'ionicons/icons';

and add this code inside the constructor

constructor() {
    addIcons({ logOutOutline });
  }

you can add multiple icons by separating them with a comma in both import section and the constructor.

use this code inside the HTML as follows

<ion-icon name="log-out-outline"></ion-icon>

Finny

Thanks. Why it's not mentioned in the documentation? – Idem

Answer 2

add

addIcons({logOutOutline});

in your component's constructor.

Innerve

Answer 3

Import the following in your typescript file:

import {addIcons} from "ionicons";
import { logOutOutline } from 'ionicons/icons';

Add the icon in the constructor of the component:

constructor() {
  addIcons({ logOutOutline });
}

Use the icon in the HTML file of the component:

<ion-icon name="log-out-outline"></ion-icon>

Idun