docs(angular): clarify addIcons usage (#3222)

Author: liamdebeasi

docs/angular/build-options.md

@@ -113,6 +113,41 @@ export class HomePage {
 }
 ```
 
+Icons can also be registered in entry points such as `app.component.ts` to avoid the need to call `addIcons` multiple times. Developers should be aware that the initial application chunk may increase because the registered icons will need to be loaded at application start. However, if your application uses a small number of icons the impact of this may be minimal.
+
+```typescript title="app.component.ts"
+import { Component } from '@angular/core';
+import { addIcons } from 'ionicons';
+import { logoIonic } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.scss'],
+  standalone: true,
+})
+export class AppComponent {
+  constructor() {
+    /**
+     * 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.
+     */
+    addIcons({ logoIonic });
+  }
+}
+```
+
+Icons registered in an application entry point can then be referenced by name anywhere in the application.
+
+```html title="home.page.html"
+<!-- 
+  logoIonic was registered in app.component.ts instead of home.page.ts,
+  but it can still be used in home.page.html.
+-->
+<ion-icon name="logo-ionic"></ion-icon>
+```
+
 **Routing**
 
 Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on Ionic components should import the `IonRouterLink` directive. Developers who wish to use these routing features on anchor (`<a>`) elements should import `IonRouterLinkWithHref` instead.
@@ -218,6 +253,40 @@ export class HomePage {
 }
 ```
 
+Icons can also be registered in entry points such as `app.component.ts` to avoid the need to call `addIcons` multiple times. Developers should be aware that the initial application chunk may increase because the registered icons will need to be loaded at application start. However, if your application uses a small number of icons the impact of this may be minimal.
+
+```typescript title="app.component.ts"
+import { Component } from '@angular/core';
+import { addIcons } from 'ionicons';
+import { logoIonic } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.scss'],
+})
+export class AppComponent {
+  constructor() {
+    /**
+     * 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.
+     */
+    addIcons({ logoIonic });
+  }
+}
+```
+
+Icons registered in an application entry point can then be referenced by name anywhere in the application.
+
+```html title="home.page.html"
+<!-- 
+  logoIonic was registered in app.component.ts instead of home.page.ts,
+  but it can still be used in home.page.html.
+-->
+<ion-icon name="logo-ionic"></ion-icon>
+```
+
 **Routing**
 
 Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on Ionic components should import the `IonRouterLink` directive. Developers who wish to use these routing features on anchor (`<a>`) elements should import `IonRouterLinkWithHref` instead.