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 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 });
}
}