From 96aa17e10b9aca8ab67ae8d0131569d6f436cd32 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 1 Nov 2023 10:08:52 -0400
Subject: [PATCH 1/3] fix(icon): add better warning when loading icons

---
 src/components/icon/utils.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/icon/utils.ts b/src/components/icon/utils.ts
index f6c664479..16206eab4 100644
--- a/src/components/icon/utils.ts
+++ b/src/components/icon/utils.ts
@@ -88,7 +88,16 @@ const getNamedUrl = (iconName: string) => {
   if (url) {
     return url;
   }
-  return getAssetPath(`svg/${iconName}.svg`);
+  try {
+    return getAssetPath(`svg/${iconName}.svg`);
+  } catch(e) {
+    /**
+     * In the custom elements build version of ionicons, referencing an icon
+     * by name will throw an invalid URL error because the asset path is not defined.
+     * This catches that error and logs something that is more developer-friendly.
+     */
+    console.warn(`[Ionicons Warning]: Could not load icon with name "${name}". Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to the icon component.`);
+  }
 };
 
 

From fe2b15cd873b47c2e54b38d742c65e361459614d Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 1 Nov 2023 10:18:46 -0400
Subject: [PATCH 2/3] typo

---
 src/components/icon/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/icon/utils.ts b/src/components/icon/utils.ts
index 16206eab4..86ec55fc2 100644
--- a/src/components/icon/utils.ts
+++ b/src/components/icon/utils.ts
@@ -96,7 +96,7 @@ const getNamedUrl = (iconName: string) => {
      * by name will throw an invalid URL error because the asset path is not defined.
      * This catches that error and logs something that is more developer-friendly.
      */
-    console.warn(`[Ionicons Warning]: Could not load icon with name "${name}". Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to the icon component.`);
+    console.warn(`[Ionicons Warning]: Could not load icon with name "${iconName}". Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to the icon component.`);
   }
 };
 

From 3b7cc23283cc70a49ff69a6033bba743c2825cbc Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 1 Nov 2023 10:21:50 -0400
Subject: [PATCH 3/3] pass icon el reference

---
 src/components/icon/utils.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/icon/utils.ts b/src/components/icon/utils.ts
index 86ec55fc2..c95d97297 100644
--- a/src/components/icon/utils.ts
+++ b/src/components/icon/utils.ts
@@ -64,7 +64,7 @@ export const getUrl = (i: Icon) => {
 
   url = getName(i.name, i.icon, i.mode, i.ios, i.md);
   if (url) {
-    return getNamedUrl(url);
+    return getNamedUrl(url, i);
   }
 
   if (i.icon) {
@@ -83,7 +83,7 @@ export const getUrl = (i: Icon) => {
 };
 
 
-const getNamedUrl = (iconName: string) => {
+const getNamedUrl = (iconName: string, iconEl: Icon) => {
   const url = getIconMap().get(iconName);
   if (url) {
     return url;
@@ -95,8 +95,10 @@ const getNamedUrl = (iconName: string) => {
      * In the custom elements build version of ionicons, referencing an icon
      * by name will throw an invalid URL error because the asset path is not defined.
      * This catches that error and logs something that is more developer-friendly.
+     * We also include a reference to the ion-icon element so developers can
+     * figure out which instance of ion-icon needs to be updated.
      */
-    console.warn(`[Ionicons Warning]: Could not load icon with name "${iconName}". Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to the icon component.`);
+    console.warn(`[Ionicons Warning]: Could not load icon with name "${iconName}". Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to the icon component.`, iconEl);
   }
 };