diff --git a/projects/igniteui-angular-elements/src/app/app.module.ts b/projects/igniteui-angular-elements/src/app/app.module.ts
index 56fa430a99a..1e4c09cc437 100644
--- a/projects/igniteui-angular-elements/src/app/app.module.ts
+++ b/projects/igniteui-angular-elements/src/app/app.module.ts
@@ -31,6 +31,7 @@ import { registerConfig } from "../analyzer/elements.config";
 import { createIgxCustomElement } from './create-custom-element';
 import { IgxGridStateComponent } from '../lib/state.component';
 import { ELEMENTS_TOKEN } from 'igniteui-angular/src/lib/core/utils';
+import { IgxIconBroadcastService } from '../lib/icon.broadcast.service';
 
 @NgModule({
   imports: [
@@ -38,13 +39,14 @@ import { ELEMENTS_TOKEN } from 'igniteui-angular/src/lib/core/utils';
     BrowserAnimationsModule
   ],
   providers: [
-    { provide: ELEMENTS_TOKEN, useValue: true }
+    { provide: ELEMENTS_TOKEN, useValue: true },
+    IgxIconBroadcastService
   ],
 //   bootstrap: []
 })
 export class AppModule {
 
-  constructor(private injector: Injector) {}
+  constructor(private injector: Injector, private _iconBroadcast: IgxIconBroadcastService) {}
 
   ngDoBootstrap() {
 
diff --git a/projects/igniteui-angular-elements/src/index.html b/projects/igniteui-angular-elements/src/index.html
index 4bd12923148..e1585a6c320 100644
--- a/projects/igniteui-angular-elements/src/index.html
+++ b/projects/igniteui-angular-elements/src/index.html
@@ -73,6 +73,7 @@ <h3 class="ig-typography__h6">Flat Grid (column groups, toolbar, paginator, row
             <igc-toggle-button value="medium">Medium</igc-toggle-button>
             <igc-toggle-button value="large" selected>Large</igc-toggle-button>
         </igc-button-group>
+        <button id="toggleIcon">Change Filter Icon</button>
     </div>
 
     <h3 class="ig-typography__h6">Standalone paginator</h3>
@@ -112,10 +113,18 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
     import { html, nothing } from "/lit-html.js";
     import { Directive, directive } from "/directive.js";
 
-    import { defineComponents, IgcSelectComponent, IgcComboComponent, IgcButtonComponent, IgcButtonGroupComponent } from "igniteui-webcomponents";
+    import { defineComponents, IgcSelectComponent, IgcComboComponent, IgcButtonComponent, IgcButtonGroupComponent, registerIconFromText, setIconRef  } from "igniteui-webcomponents";
     // import "igniteui-webcomponents/themes/light/bootstrap.css";
 
     defineComponents(IgcSelectComponent, IgcComboComponent, IgcButtonComponent, IgcButtonGroupComponent);
+
+
+    const buildIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>';
+  const thumbUpIcon =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
+    let icon = thumbUpIcon;
+
     const grid1 = document.getElementById('grid1');
     const grid2 = document.getElementById('grid2');
     const buttonGroup = document.querySelector('igc-button-group');
@@ -196,6 +205,7 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
 
         document.getElementById("saveState").addEventListener("click", saveState);
         document.getElementById("restoreState").addEventListener("click", restoreState);
+        document.getElementById("toggleIcon").addEventListener("click", toggleIcon);
         const stateComponent = document.getElementById('state');
         stateComponent.options = {
             paging: false
@@ -220,6 +230,25 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
             stateComponent.applyState(obj);
         }
     }
+
+    function toggleIcon() {
+        if (icon !== thumbUpIcon) {
+            icon = thumbUpIcon;
+            registerIconFromText("filter_list", thumbUpIcon, "customSet");
+            setIconRef('filter_list', 'default', {
+                name: 'filter_list',
+                collection: 'customSet',
+            });
+
+        } else {
+            icon = buildIcon;
+            registerIconFromText("filter_list", buildIcon, "customSet2");
+            setIconRef('filter_list', 'default', {
+                name: 'filter_list',
+                collection: 'customSet2',
+            });
+        }
+    }
   </script>
 
   <!-- IgxTreeGridComponent -->
diff --git a/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.spec.ts b/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.spec.ts
new file mode 100644
index 00000000000..c58d9970e03
--- /dev/null
+++ b/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.spec.ts
@@ -0,0 +1,115 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActionType, BroadcastIconsChangeMessage, IgxIconBroadcastService, SvgIcon,  } from './icon.broadcast.service';
+import { Component, SecurityContext } from '@angular/core';
+import { IconMeta, IgxIconService } from 'igniteui-angular';
+import { wait } from 'igniteui-angular/src/lib/test-utils/ui-interactions.spec';
+
+describe('Icon broadcast service', () => {
+    let fixture: ComponentFixture<BroadcastServiceComponent>;
+    let broadcastChannel: BroadcastChannel;
+    let events: BroadcastIconsChangeMessage[] = [];
+    const buildIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>';
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+        imports: [],
+        providers: [IgxIconBroadcastService]
+        })
+        .compileComponents();
+      });
+
+      beforeEach(() => {
+        broadcastChannel = new BroadcastChannel("ignite-ui-icon-channel");
+        broadcastChannel.onmessage = (e: MessageEvent<BroadcastIconsChangeMessage>) => {
+            events.push(e.data);
+        }
+        fixture = TestBed.createComponent(BroadcastServiceComponent);
+      });
+
+      afterEach(() => {
+        events = [];
+        broadcastChannel.close();
+      });
+
+    describe('Broadcast Events', () => {
+      it('should correctly process event of icons registering on channel.', async() => {
+        // simulate a new icon being registered on channel
+        const icons: Map<string, Map<string, SvgIcon>> = new Map();
+        const icon: Map<string, SvgIcon> = new Map()
+        icon.set("customIcon", { svg: buildIcon });
+        icons.set("customCollection", icon);
+        const message: BroadcastIconsChangeMessage = {
+            actionType: ActionType.RegisterIcon,
+            collections: icons
+        };
+        broadcastChannel.postMessage(message);
+        fixture.detectChanges();
+        await wait(50);
+        fixture.detectChanges();
+        const iconService = fixture.componentInstance.iconService;
+        const svg = iconService.getSvgIcon("customIcon", "customCollection");
+        expect(svg).not.toBeUndefined();
+      });
+
+      it('should correctly process event of setting an icon reference on channel.', async() => {
+        const refs: Map<string, Map<string, IconMeta>> = new Map();
+        const ref: Map<string, IconMeta> = new Map()
+        ref.set("customIcon", {name: "customIcon", family: "customCollection" });
+        refs.set("customCollection", ref);
+        const message: BroadcastIconsChangeMessage = {
+            actionType: ActionType.RegisterIcon,
+            references: refs
+        };
+        broadcastChannel.postMessage(message);
+        fixture.detectChanges();
+        await wait(50);
+        fixture.detectChanges();
+
+        const iconService = fixture.componentInstance.iconService;
+        const serviceRef = iconService.getIconRef("customIcon", "customCollection");
+        expect(serviceRef.family).toBe("customCollection");
+        expect(serviceRef.name).toBe("customIcon");
+      });
+
+      it('should send a request to sync state from any peer already on the channel on init.', async() => {
+        await wait(50);
+        expect(events.length).toBe(1);
+        expect(events[0].actionType).toBe(ActionType.SyncState);
+      });
+
+      it('should correctly process event of synching full state of icons on channel.', async() => {
+        const icons: Map<string, Map<string, SvgIcon>> = new Map();
+        const icon: Map<string, SvgIcon> = new Map()
+        icon.set("customIcon", { svg: buildIcon });
+        icons.set("customCollection", icon);
+        const refs: Map<string, Map<string, IconMeta>> = new Map();
+        const ref: Map<string, IconMeta> = new Map()
+        ref.set("customIcon", {name: "customIcon", family: "customCollection" });
+        refs.set("customCollection", ref);
+        const message: BroadcastIconsChangeMessage = {
+            actionType: ActionType.SyncState,
+            collections: icons,
+            references: refs
+        };
+        broadcastChannel.postMessage(message);
+        await wait(50);
+        const iconService = fixture.componentInstance.iconService;
+        const svg = iconService.getSvgIcon("customIcon", "customCollection");
+        expect(svg).not.toBeUndefined();
+        const serviceRef = iconService.getIconRef("customIcon", "customCollection");
+        expect(serviceRef.family).toBe("customCollection");
+        expect(serviceRef.name).toBe("customIcon");
+      });
+    })
+});
+
+@Component({
+    template: `
+    `,
+    standalone: true,
+    providers: [IgxIconBroadcastService, IgxIconService]
+})
+export class BroadcastServiceComponent {
+    constructor(public iconBroadcast: IgxIconBroadcastService, public iconService: IgxIconService) {}
+}
diff --git a/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts b/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts
new file mode 100644
index 00000000000..34a32a8c4d6
--- /dev/null
+++ b/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts
@@ -0,0 +1,82 @@
+import { Injectable, Optional } from '@angular/core';
+import { PlatformUtil } from '../../../igniteui-angular/src/lib/core/utils';
+import { IconMeta, IgxIconService } from '../../../igniteui-angular/src/lib/icon/icon.service';
+
+
+export interface SvgIcon {
+    svg: string;
+    title?: string;
+  }
+
+  export type Collection<T, U> = Map<T, U>;
+
+  export enum ActionType {
+    SyncState = 0,
+    RegisterIcon = 1,
+    UpdateIconReference = 2,
+  }
+
+  export interface BroadcastIconsChangeMessage {
+    actionType: ActionType;
+    collections?: Collection<string, Map<string, SvgIcon>>;
+    references?: Collection<string, Map<string, IconMeta>>;
+  }
+
+/** @hidden @internal **/
+@Injectable()
+export class IgxIconBroadcastService {
+    private iconBroadcastChannel: BroadcastChannel;
+    constructor(
+        protected _iconService: IgxIconService,
+        @Optional() private _platformUtil: PlatformUtil
+    ) {
+        if (this._platformUtil?.isBrowser) {
+            // open broadcast channel for sync with wc icon service.
+            this.iconBroadcastChannel = new BroadcastChannel("ignite-ui-icon-channel");
+            this.iconBroadcastChannel.onmessage = (event) => {
+                const message = event.data as BroadcastIconsChangeMessage;
+                if (message.actionType === ActionType.SyncState ||
+                     message.actionType === ActionType.RegisterIcon) {
+                    this.updateIconsFromCollection(message.collections);
+                }
+
+                if (message.actionType === ActionType.SyncState ||
+                     message.actionType === ActionType.UpdateIconReference) {
+                    this.updateRefsFromCollection(message.references);
+                }
+              };
+            // send message to sync state
+            this.iconBroadcastChannel.postMessage({
+                actionType: ActionType.SyncState
+            });
+        }
+    }
+
+    private updateIconsFromCollection(collections: Collection<string, Map<string, SvgIcon>>) {
+        if (!collections) return;
+        const collectionKeys = collections.keys();
+        for (const collectionKey of collectionKeys) {
+            const collection = collections.get(collectionKey);
+            for (const iconKey of collection.keys()) {
+                const value = collection.get(iconKey).svg;
+                this._iconService.addSvgIconFromText(iconKey, value, collectionKey);
+            }
+        }
+    }
+
+    private updateRefsFromCollection(collections: Collection<string, Map<string, any>>) {
+        if (!collections) return;
+        const collectionKeys = collections.keys();
+        for (const collectionKey of collectionKeys) {
+            const collection = collections.get(collectionKey);
+            for (const iconKey of collection.keys()) {
+                const collectionName = collection.get(iconKey).collection;
+                this._iconService.setIconRef(iconKey, 'default', {
+                    family: collectionName,
+                    name: iconKey
+                });
+            }
+        }
+    }
+
+}