diff --git a/samples/notifications/banner/banner-advanced-sample/src/index.tsx b/samples/notifications/banner/banner-advanced-sample/src/index.tsx
index 7b878fe8c..ee3c68aaa 100644
--- a/samples/notifications/banner/banner-advanced-sample/src/index.tsx
+++ b/samples/notifications/banner/banner-advanced-sample/src/index.tsx
@@ -2,33 +2,18 @@ import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom/client';
 import {
     IgrBanner,
-    IgrBannerModule,
     IgrButton,
-    IgrButtonModule,
     IgrCard,
-    IgrCardModule,
     IgrIcon,
-    IgrIconModule,
     IgrNavbar,
-    IgrNavbarModule,
     IgrRipple,
-    IgrRippleModule,
     IgrToast,
-    IgrToastModule,
     registerIconFromText,
-  } from 'igniteui-react';
+} from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import './BannerAdvancedSample.css';
 import './index.css';
 
-IgrBannerModule.register();
-IgrNavbarModule.register();
-IgrIconModule.register();
-IgrCardModule.register();
-IgrButtonModule.register();
-IgrRippleModule.register();
-IgrToastModule.register();
-
 const wifiOnIcon =
     '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12.01 21.49L23.64 7c-.45-.34-4.93-4-11.64-4C5.28 3 .81 6.66.36 7l11.63 14.49.01.01.01-.01z"/></svg>';
 const wifiOffIcon =
@@ -40,6 +25,7 @@ export default function BannerAdvancedSample() {
     const toastRef = useRef<IgrToast>(null);
 
     const [wifiState, setWifiState] = useState(false);
+    const [iconName, setIconName] = useState("signal_wifi_off");
 
     useEffect(() => {
         registerIconFromText('signal_wifi_off', wifiOffIcon);
@@ -47,20 +33,21 @@ export default function BannerAdvancedSample() {
         bannerRef.current.open = true;
     }, []);
 
-    function refreshBanner() {
-        if (!wifiState) {
-            iconRef.current.name = 'signal_wifi_4_bar';
+    const refreshBanner = () => {
+        const nextWifiState = !wifiState;
+        setWifiState(nextWifiState);
+        setIconName(nextWifiState ? "signal_wifi_4_bar" : "signal_wifi_off");
+
+        if (nextWifiState) {
             bannerRef.current.hide();
         } else {
-            iconRef.current.name = 'signal_wifi_off';
             bannerRef.current.show();
         }
 
-        setWifiState(current => !current);
         showToast();
     }
 
-    function showToast() {
+    const showToast = () => {
         toastRef.current.open = false;
         toastRef.current.show();
     }
@@ -69,37 +56,37 @@ export default function BannerAdvancedSample() {
         <div className="gallery__wrapper">
             <div className="gallery__content">
                 <IgrNavbar>
-                    <h1 key="header">Gallery</h1>
-                    <IgrIcon ref={iconRef} key="icon-wifi-off" name="signal_wifi_off" slot="end" onClick={() => refreshBanner()}></IgrIcon>
+                    <h1>Gallery</h1>
+                    <IgrIcon ref={iconRef} name={iconName} slot="end" onClick={refreshBanner}></IgrIcon>
                 </IgrNavbar>
 
                 <IgrBanner ref={bannerRef} className="offline-banner">
-                    <IgrIcon key="icon-wifi-off" name="signal_wifi_off" slot="prefix"></IgrIcon>
-                    <span key="message">You have lost connection to the internet. This app is offline.</span>
-                    <div key="actions" slot="actions">
-                        <IgrButton key="button-offline" variant="flat" onClick={() => bannerRef.current.hide()}>
-                            <IgrRipple key="ripple-offline" />
-                            <span key="action-offline">Continue Offline</span>
+                    <IgrIcon name="signal_wifi_off" slot="prefix"></IgrIcon>
+                    <span>You have lost connection to the internet. This app is offline.</span>
+                    <div slot="actions">
+                        <IgrButton variant="flat" onClick={() => bannerRef.current.hide()}>
+                            <IgrRipple />
+                            <span>Continue Offline</span>
                         </IgrButton>
-                        <IgrButton key="button-wifi" variant="flat" onClick={() => refreshBanner()}>
-                            <IgrRipple key="ripple-wifi" />
-                            <span key="action-wifi">Turn On Wifi</span>
+                        <IgrButton variant="flat" onClick={refreshBanner}>
+                            <IgrRipple />
+                            <span>Turn On Wifi</span>
                         </IgrButton>
                     </div>
                 </IgrBanner>
 
                 <IgrCard className="gallery__item" elevated>
-                    <div key="img-forest">
-                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg"/>
+                    <div>
+                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg" />
                     </div>
                 </IgrCard>
                 <IgrCard className="gallery__item" elevated>
-                    <div key="img-yosemite">
-                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg"/>
+                    <div>
+                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg" />
                     </div>
                 </IgrCard>
                 <IgrToast ref={toastRef} position="middle">
-                    <span key="toast-message">{`Wifi is now ${wifiState ? 'on' : 'off'}`}</span>
+                    <span>{`Wifi is now ${wifiState ? 'on' : 'off'}`}</span>
                 </IgrToast>
             </div>
         </div>
@@ -108,4 +95,4 @@ export default function BannerAdvancedSample() {
 
 // rendering above class to the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<BannerAdvancedSample/>);
+root.render(<BannerAdvancedSample />);
diff --git a/samples/notifications/banner/banner-sample-1/src/index.tsx b/samples/notifications/banner/banner-sample-1/src/index.tsx
index 637a946dd..7d8b54d56 100644
--- a/samples/notifications/banner/banner-sample-1/src/index.tsx
+++ b/samples/notifications/banner/banner-sample-1/src/index.tsx
@@ -2,24 +2,15 @@ import React, { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom/client';
 import {
     IgrBanner,
-    IgrBannerModule,
     IgrCard,
-    IgrCardModule,
     IgrIcon,
-    IgrIconModule,
     IgrNavbar,
-    IgrNavbarModule,
     registerIconFromText,
-  } from 'igniteui-react';
+} from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import './BannerSample1.css';
 import './index.css';
 
-IgrBannerModule.register();
-IgrNavbarModule.register();
-IgrIconModule.register();
-IgrCardModule.register();
-
 const refreshIcon =
     '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>';
 
@@ -35,22 +26,22 @@ export default function BannerSample1() {
         <div className="gallery__wrapper">
             <div className="gallery__content">
                 <IgrNavbar>
-                  <h1 key="header">Gallery</h1>
-                  <IgrIcon key="icon" name="refresh" slot="end" onClick={() => bannerRef.current.show()}></IgrIcon>
+                    <h1>Gallery</h1>
+                    <IgrIcon name="refresh" slot="end" onClick={() => bannerRef.current.show()}></IgrIcon>
                 </IgrNavbar>
 
                 <IgrBanner ref={bannerRef} className="offline-banner">
-                  <span key="message">You are currently offline.</span>
+                    <span>You are currently offline.</span>
                 </IgrBanner>
-                
+
                 <IgrCard className="gallery__item" elevated>
-                    <div key="img-forest">
-                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg"/>
+                    <div>
+                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg" />
                     </div>
                 </IgrCard>
                 <IgrCard className="gallery__item" elevated>
-                    <div key="img-yosemite">
-                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg"/>
+                    <div>
+                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg" />
                     </div>
                 </IgrCard>
             </div>
@@ -60,4 +51,4 @@ export default function BannerSample1() {
 
 // rendering above class to the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<BannerSample1/>);
+root.render(<BannerSample1 />);
diff --git a/samples/notifications/banner/banner-sample-2/src/index.tsx b/samples/notifications/banner/banner-sample-2/src/index.tsx
index 6f12872ae..9b0e616dc 100644
--- a/samples/notifications/banner/banner-sample-2/src/index.tsx
+++ b/samples/notifications/banner/banner-sample-2/src/index.tsx
@@ -2,30 +2,17 @@ import React, { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom/client';
 import {
     IgrBanner,
-    IgrBannerModule,
     IgrButton,
-    IgrButtonModule,
     IgrCard,
-    IgrCardModule,
     IgrIcon,
-    IgrIconModule,
     IgrNavbar,
-    IgrNavbarModule,
     IgrRipple,
-    IgrRippleModule,
     registerIconFromText,
-  } from 'igniteui-react';
+} from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import './BannerSample2.css';
 import './index.css';
 
-IgrBannerModule.register();
-IgrNavbarModule.register();
-IgrIconModule.register();
-IgrCardModule.register();
-IgrButtonModule.register();
-IgrRippleModule.register();
-
 const refreshIcon =
     '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>';
 const wifiOffIcon =
@@ -44,29 +31,29 @@ export default function BannerSample2() {
         <div className="gallery__wrapper">
             <div className="gallery__content">
                 <IgrNavbar>
-                    <h1 key="header">Gallery</h1>
-                    <IgrIcon key="icon-refresh" name="refresh" slot="end" onClick={() => bannerRef.current.show()}></IgrIcon>
+                    <h1>Gallery</h1>
+                    <IgrIcon name="refresh" slot="end" onClick={() => bannerRef.current.show()}></IgrIcon>
                 </IgrNavbar>
 
                 <IgrBanner ref={bannerRef} className="offline-banner">
-                    <IgrIcon key="icon-wifi-off" name="signal_wifi_off" slot="prefix"></IgrIcon>
-                    <span key="message">You have lost connection to the internet. This app is offline.</span>
-                    <div key="actions"slot="actions" >
-                        <IgrButton key="button" variant="flat" onClick={() => bannerRef.current.toggle()}>
-                            <IgrRipple key="ripple" />
-                            <span key="action-text">Toggle Banner</span>
+                    <IgrIcon name="signal_wifi_off" slot="prefix"></IgrIcon>
+                    <span>You have lost connection to the internet. This app is offline.</span>
+                    <div slot="actions" >
+                        <IgrButton variant="flat" onClick={() => bannerRef.current.toggle()}>
+                            <IgrRipple />
+                            <span>Toggle Banner</span>
                         </IgrButton>
                     </div>
                 </IgrBanner>
 
                 <IgrCard className="gallery__item" elevated>
-                    <div key="img-forest">
-                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg"/>
+                    <div>
+                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg" />
                     </div>
                 </IgrCard>
                 <IgrCard className="gallery__item" elevated>
-                    <div key="img-yosemite">
-                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg"/>
+                    <div>
+                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg" />
                     </div>
                 </IgrCard>
             </div>
@@ -76,4 +63,4 @@ export default function BannerSample2() {
 
 // rendering above class to the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<BannerSample2/>);
+root.render(<BannerSample2 />);
diff --git a/samples/notifications/banner/banner-styling/src/index.tsx b/samples/notifications/banner/banner-styling/src/index.tsx
index 8cd3de597..671d5ca5f 100644
--- a/samples/notifications/banner/banner-styling/src/index.tsx
+++ b/samples/notifications/banner/banner-styling/src/index.tsx
@@ -2,33 +2,18 @@ import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom/client';
 import {
     IgrBanner,
-    IgrBannerModule,
     IgrButton,
-    IgrButtonModule,
     IgrCard,
-    IgrCardModule,
     IgrIcon,
-    IgrIconModule,
     IgrNavbar,
-    IgrNavbarModule,
     IgrRipple,
-    IgrRippleModule,
     IgrToast,
-    IgrToastModule,
     registerIconFromText,
-  } from 'igniteui-react';
+} from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import './BannerStyling.css';
 import './index.css';
 
-IgrBannerModule.register();
-IgrNavbarModule.register();
-IgrIconModule.register();
-IgrCardModule.register();
-IgrButtonModule.register();
-IgrRippleModule.register();
-IgrToastModule.register();
-
 const wifiOnIcon =
     '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12.01 21.49L23.64 7c-.45-.34-4.93-4-11.64-4C5.28 3 .81 6.66.36 7l11.63 14.49.01.01.01-.01z"/></svg>';
 const wifiOffIcon =
@@ -40,6 +25,7 @@ export default function BannerStyling() {
     const toastRef = useRef<IgrToast>(null);
 
     const [wifiState, setWifiState] = useState(false);
+    const [iconName, setIconName] = useState("signal_wifi_off");
 
     useEffect(() => {
         registerIconFromText('signal_wifi_off', wifiOffIcon);
@@ -47,20 +33,21 @@ export default function BannerStyling() {
         bannerRef.current.open = true;
     }, []);
 
-    function refreshBanner() {
-        if (!wifiState) {
-            iconRef.current.name = 'signal_wifi_4_bar';
+    const refreshBanner = () => {
+        const nextWifiState = !wifiState;
+        setWifiState(nextWifiState);
+        setIconName(nextWifiState ? "signal_wifi_4_bar" : "signal_wifi_off");
+
+        if (nextWifiState) {
             bannerRef.current.hide();
         } else {
-            iconRef.current.name = 'signal_wifi_off';
             bannerRef.current.show();
         }
 
-        setWifiState(current => !current);
         showToast();
     }
 
-    function showToast() {
+    const showToast = () => {
         toastRef.current.open = false;
         toastRef.current.show();
     }
@@ -69,37 +56,37 @@ export default function BannerStyling() {
         <div className="gallery__wrapper">
             <div className="gallery__content">
                 <IgrNavbar>
-                    <h1 key="header">Gallery</h1>
-                    <IgrIcon ref={iconRef} key="icon-wifi-off" name="signal_wifi_off" slot="end" onClick={() => refreshBanner()}></IgrIcon>
+                    <h1>Gallery</h1>
+                    <IgrIcon ref={iconRef} name={iconName} slot="end" onClick={refreshBanner}></IgrIcon>
                 </IgrNavbar>
 
                 <IgrBanner ref={bannerRef} className="offline-banner">
-                    <IgrIcon key="icon-wifi-off" name="signal_wifi_off" slot="prefix"></IgrIcon>
-                    <span key="message">You have lost connection to the internet. This app is offline.</span>
-                    <div key="actions" slot="actions">
-                        <IgrButton key="button-offline" variant="flat" onClick={() => bannerRef.current.hide()}>
-                            <IgrRipple key="ripple-offline" />
-                            <span key="action-offline">Continue Offline</span>
+                    <IgrIcon name="signal_wifi_off" slot="prefix"></IgrIcon>
+                    <span>You have lost connection to the internet. This app is offline.</span>
+                    <div slot="actions">
+                        <IgrButton variant="flat" onClick={() => bannerRef.current.hide()}>
+                            <IgrRipple />
+                            <span>Continue Offline</span>
                         </IgrButton>
-                        <IgrButton key="button-wifi" variant="flat" onClick={() => refreshBanner()}>
-                            <IgrRipple key="ripple-wifi" />
-                            <span key="action-wifi">Turn On Wifi</span>
+                        <IgrButton variant="flat" onClick={refreshBanner}>
+                            <IgrRipple />
+                            <span>Turn On Wifi</span>
                         </IgrButton>
                     </div>
                 </IgrBanner>
 
                 <IgrCard className="gallery__item" elevated>
-                    <div key="img-forest">
-                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg"/>
+                    <div>
+                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg" />
                     </div>
                 </IgrCard>
                 <IgrCard className="gallery__item" elevated>
-                    <div key="img-yosemite">
-                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg"/>
+                    <div>
+                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg" />
                     </div>
                 </IgrCard>
                 <IgrToast ref={toastRef} position="middle">
-                    <span key="toast-message">{`Wifi is now ${wifiState ? 'on' : 'off'}`}</span>
+                    <span>{`Wifi is now ${wifiState ? 'on' : 'off'}`}</span>
                 </IgrToast>
             </div>
         </div>
@@ -108,4 +95,4 @@ export default function BannerStyling() {
 
 // rendering above class to the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<BannerStyling/>);
+root.render(<BannerStyling />);