From 19e06f92ee5f90c149fb1fcf68eb47384ac2a97d Mon Sep 17 00:00:00 2001
From: vikalpg <vikalpg@adobe.com>
Date: Fri, 21 Apr 2023 22:55:33 +0530
Subject: [PATCH] feat(icon): image src invalid error api

---
 packages/icon/src/Icon.ts             | 16 +++++++++++++++-
 packages/icon/stories/icon.stories.ts | 21 +++++++++++++++++++++
 packages/icon/test/icon.test.ts       | 20 ++++++++++++++++++++
 3 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/packages/icon/src/Icon.ts b/packages/icon/src/Icon.ts
index 1495ba95ab..5cc6d3ea59 100644
--- a/packages/icon/src/Icon.ts
+++ b/packages/icon/src/Icon.ts
@@ -70,6 +70,16 @@ export class Icon extends IconBase {
         }
     };
 
+    private announceIconImageSrcError(): void {
+        this.dispatchEvent(
+            new Event('error', {
+                cancelable: true,
+                bubbles: true,
+                composed: true,
+            })
+        );
+    }
+
     protected override render(): TemplateResult {
         if (this.name) {
             return html`
@@ -77,7 +87,11 @@ export class Icon extends IconBase {
             `;
         } else if (this.src) {
             return html`
-                <img src="${this.src}" alt=${ifDefined(this.label)} />
+                <img
+                    src="${this.src}"
+                    alt=${ifDefined(this.label)}
+                    @error=${this.announceIconImageSrcError}
+                />
             `;
         }
         return super.render();
diff --git a/packages/icon/stories/icon.stories.ts b/packages/icon/stories/icon.stories.ts
index 9db5298dc4..aaee5008fb 100644
--- a/packages/icon/stories/icon.stories.ts
+++ b/packages/icon/stories/icon.stories.ts
@@ -57,6 +57,27 @@ export const imageIcon = (): TemplateResult => {
 
 imageIcon.storyName = 'Image Icon';
 
+export const imageIconSrcError = (): TemplateResult => {
+    const error = (): void => {
+        console.error('Invalid sp-icon src provided');
+    };
+
+    return html`
+        ${sizes.map(
+            (size) => html`
+                <sp-icon
+                    label="Back"
+                    size=${size}
+                    src=${back}
+                    @error=${error}
+                ></sp-icon>
+            `
+        )}
+    `;
+};
+
+imageIcon.storyName = 'Image Icon src invalid error';
+
 export const svgIcon = (): TemplateResult => {
     return html`
         ${sizes.map(
diff --git a/packages/icon/test/icon.test.ts b/packages/icon/test/icon.test.ts
index a40ceb7950..fef9ef90c4 100644
--- a/packages/icon/test/icon.test.ts
+++ b/packages/icon/test/icon.test.ts
@@ -15,6 +15,7 @@ import { Icon } from '@spectrum-web-components/icon';
 import '@spectrum-web-components/icons/sp-icons-medium.js';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
+import Sinon from 'sinon';
 
 describe('Icon', () => {
     before(async () => {
@@ -69,6 +70,25 @@ describe('Icon', () => {
         await expect(el).to.be.accessible();
     });
 
+    it('loads w/ invalid src, error dispatching', async () => {
+        const error = Sinon.spy();
+        const el = await fixture<Icon>(
+            html`
+                <sp-icon
+                    label="Image Icon"
+                    src="invalid-image-src"
+                    @error=${error}
+                ></sp-icon>
+            `
+        );
+
+        await elementUpdated(el);
+
+        await expect(el).to.be.accessible();
+
+        expect(error).to.be.calledWithExactly(new Event('error'));
+    });
+
     it('loads w/ label', async () => {
         const label = 'Chevron';
         const el = await fixture<Icon>(