From dd62c43cb0046bb4285688a92deb8d7fe107baa8 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 1 Nov 2023 10:00:00 -0400 Subject: [PATCH 1/2] docs(angular): clarify addIcons usage --- docs/angular/build-options.md | 69 +++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) diff --git a/docs/angular/build-options.md b/docs/angular/build-options.md index 46c85e0d08f..5c0f6613b6f 100644 --- a/docs/angular/build-options.md +++ b/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. + +```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" + + +``` + **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 (``) 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. + +```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" + + +``` + **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 (``) elements should import `IonRouterLinkWithHref` instead. From 703daec200ad9e917bb33cc1ff6a09d07676ae7c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 1 Nov 2023 10:03:19 -0400 Subject: [PATCH 2/2] add note --- docs/angular/build-options.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/angular/build-options.md b/docs/angular/build-options.md index 5c0f6613b6f..763da398802 100644 --- a/docs/angular/build-options.md +++ b/docs/angular/build-options.md @@ -113,7 +113,7 @@ 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. +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'; @@ -253,7 +253,7 @@ 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. +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';