Ion-icon needs addIcon(..) in Ionic8 Angular19?!

Ionic Framework Ionic Angular
1

Hi,

Im’ just trying out Ionic 8 with Angular19.

It looks like ion-icon is not anymore working like before. I get errors like:

Ionicons Warning]: Could not load icon with name “trash-outline”. Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to the icon component. <ion-icon _ngcontent-ng-c3651251419 slot=​"top" name=​"trash-outline" class=​"button md" style=​"margin-bottom:​ 5px;​" ng-reflect-name=​"trash-outline" role=​"img">​…​​slot

I have to add every single icon for every componant manually. You can check it even in the tabs template. Is this a bug or a feature? Any workaround?

Thanks!
Tobias

2

I don’t use Angular, but the example in the Docs does show the icon being imported explicitly - ion-icon: Icon Component for Ionic Framework Apps. In Vue, we have to explicitly import all components and icons :smile: I personally prefer this.

The example does note:

Any icons you want to use in your application can be registered in app.component.ts and then referenced by name anywhere in your application.

I tried importing and registering globally in app.component.ts and that does work (don’t need to register in the component where it is being used).

import { Component } from '@angular/core';
import { IonApp, IonContent } from '@ionic/angular/standalone';
import { ExampleComponent } from './example.component';
import { addIcons } from 'ionicons';
import { logoIonic } from 'ionicons/icons';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  imports: [ExampleComponent, IonApp, IonContent],
})
export class AppComponent {
  constructor() {
    addIcons({ logoIonic });
  }
}
3

Hi!

In my case, we included all the icons by default for the development environment. For production, you could include only the icons you’re going to use. There are libraries that do this automatically, but I’m not familiar with how to use them.

app.component.ts

import { addIcons } from 'ionicons';
import * as allIcons from 'ionicons/icons';


constructor() {
    addIcons(allIcons);
}

Bye!