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`
-
+
`;
}
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`
+
+ `
+ )}
+ `;
+};
+
+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(
+ html`
+
+ `
+ );
+
+ 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(