From 371c58f12ab357ea6a67c0eb6165cc452ad82a7a Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Mon, 11 Sep 2023 11:39:10 -0700
Subject: [PATCH 1/2] fix(icon): verify the icon loads in the lifecycle

---
 src/components/icon/icon.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index b6a9f5fcd..9a8ae8526 100755
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -12,6 +12,7 @@ export class Icon {
   private io?: IntersectionObserver;
   private iconName: string | null = null;
   private inheritedAttributes: { [k: string]: any } = {};
+  private didLoadIcon = false;
 
   @Element() el!: HTMLElement;
 
@@ -94,6 +95,12 @@ export class Icon {
     });
   }
 
+  componentDidLoad() {
+    if (!this.didLoadIcon) {
+      this.loadIcon();
+    }
+  }
+
   disconnectedCallback() {
     if (this.io) {
       this.io.disconnect();
@@ -138,6 +145,7 @@ export class Icon {
           // async if it hasn't been loaded
           getSvgContent(url, this.sanitize).then(() => (this.svgContent = ioniconContent.get(url)));
         }
+        this.didLoadIcon = true;
       }
     }
 

From c23df00509fd511ea4e0f527684d9e359b9479fc Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Mon, 11 Sep 2023 14:25:45 -0700
Subject: [PATCH 2/2] fix(icon): add comment

---
 src/components/icon/icon.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 9a8ae8526..10cdd0051 100755
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -96,6 +96,12 @@ export class Icon {
   }
 
   componentDidLoad() {
+    /**
+     * Addresses an Angular issue where property values are assigned after the 'connectedCallback' but prior to the registration of watchers.
+     * This enhancement ensures the loading of an icon when the component has finished rendering and the icon has yet to apply the SVG data.
+     * This modification pertains to the usage of Angular's binding syntax:
+     * `<ion-icon [name]="myIconName"></ion-icon>`
+     */
     if (!this.didLoadIcon) {
       this.loadIcon();
     }