diff --git a/samples/inputs/rating/basic/src/index.tsx b/samples/inputs/rating/basic/src/index.tsx
index f0139a8c1d..1ef035a618 100644
--- a/samples/inputs/rating/basic/src/index.tsx
+++ b/samples/inputs/rating/basic/src/index.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrRating, IgrRatingModule,} from 'igniteui-react';
+import { IgrRating } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrRatingModule.register();
-
 export default class RatingOverview extends React.Component<any, any> {
 
     constructor(props: any) {
diff --git a/samples/inputs/rating/custom/src/index.tsx b/samples/inputs/rating/custom/src/index.tsx
index abf0801391..8b128acbaa 100644
--- a/samples/inputs/rating/custom/src/index.tsx
+++ b/samples/inputs/rating/custom/src/index.tsx
@@ -1,13 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrRating, IgrRatingModule, IgrRatingSymbol, IgrRatingSymbolModule, IgrIcon, IgrIconModule, registerIconFromText } from 'igniteui-react';
+import { IgrRating, IgrRatingSymbol, IgrIcon, registerIconFromText } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrRatingModule.register();
-IgrRatingSymbolModule.register();
-IgrIconModule.register();
-
 const emptyHeart = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 241.597 220.057' version='1.0'><path style='opacity:.98000004;fill:none;stroke:#000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0' d='M243.452 1708.979c-26.934.23-51.58 21.476-55.081 48.293-3.114 23.844 7.33 47.4 23.968 64.215 27.515 27.805 61.227 49.794 83.447 82.547 4.39-4.689 9.278-12.066 14.227-17.529 25.23-27.85 58.166-48.013 80.865-78.155 17.175-22.806 19.103-58.113-.538-80.405-18.25-20.712-51.76-25.17-74.37-9.254-8.226 5.791-15.274 13.37-19.932 22.312-10.053-19.32-30.534-32.214-52.586-32.024z' transform='translate(-175.323 -1696.476)'/></svg>";
 const heartIcon = '<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" id="svg1" viewBox="0 0 475.82 442.01" version="1.0"> <g id="layer1" transform="translate(-134.07 -225.8)"> <path id="path7" d="m263.42 235.15c-66.24 0-120 53.76-120 120 0 134.75 135.93 170.08 228.56 303.3 87.57-132.4 228.56-172.85 228.56-303.3 0-66.24-53.76-120-120-120-48.05 0-89.4 28.37-108.56 69.18-19.16-40.81-60.52-69.18-108.56-69.18z" stroke="#000" stroke-width="18.7" fill="#e60000"/> </g> </svg>';
 
@@ -23,25 +19,25 @@ export default class RatingCustomSymbols extends React.Component<any, any> {
         return (
             <div className="container sample">
                 <IgrRating className="size-large" label="Rate Experience" step={.5} value={3} hoverPreview={true}>
-                    <IgrRatingSymbol key="0">
-                        <div key="div0"><IgrIcon name='heart' collection="material" key="default0"></IgrIcon></div>
-                        <div key="empty-div0" slot='empty'><IgrIcon name='emptyHeart' collection="material" key="empty0"></IgrIcon></div> 
+                    <IgrRatingSymbol>
+                        <div><IgrIcon name='heart' collection="material"></IgrIcon></div>
+                        <div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div> 
                     </IgrRatingSymbol>
-                        <IgrRatingSymbol key="1">
-                        <div key="div1"><IgrIcon name='heart' collection="material" key="default1"></IgrIcon></div>
-                        <div key="empty-div1" slot='empty'><IgrIcon name='emptyHeart' collection="material" key="empty1"></IgrIcon></div>
+                        <IgrRatingSymbol>
+                        <div><IgrIcon name='heart' collection="material"></IgrIcon></div>
+                        <div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
                     </IgrRatingSymbol>
-                    <IgrRatingSymbol key="2">
-                        <div key="div2"><IgrIcon name='heart' collection="material" key="default2"></IgrIcon></div>
-                        <div key="empty-div2" slot='empty'><IgrIcon name='emptyHeart' collection="material" key="empty2"></IgrIcon></div>
+                    <IgrRatingSymbol>
+                        <div><IgrIcon name='heart' collection="material"></IgrIcon></div>
+                        <div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
                     </IgrRatingSymbol>
-                    <IgrRatingSymbol key="3">
-                        <div key="div3"><IgrIcon name='heart' collection="material" key="default3"></IgrIcon></div>
-                        <div key="empty-div3" slot='empty'><IgrIcon name='emptyHeart' collection="material" key="empty3"></IgrIcon></div>
+                    <IgrRatingSymbol>
+                        <div><IgrIcon name='heart' collection="material"></IgrIcon></div>
+                        <div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
                     </IgrRatingSymbol>
-                    <IgrRatingSymbol key="4">
-                        <div key="div4"><IgrIcon name='heart' collection="material" key="default4"></IgrIcon></div>
-                        <div key="empty-div4" slot='empty'><IgrIcon name='emptyHeart' collection="material" key="empty4"></IgrIcon></div>
+                    <IgrRatingSymbol>
+                        <div><IgrIcon name='heart' collection="material"></IgrIcon></div>
+                        <div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
                     </IgrRatingSymbol>
                 </IgrRating>
             </div>
diff --git a/samples/inputs/rating/empty/src/index.tsx b/samples/inputs/rating/empty/src/index.tsx
index 7d5f689129..14e2c0c761 100644
--- a/samples/inputs/rating/empty/src/index.tsx
+++ b/samples/inputs/rating/empty/src/index.tsx
@@ -1,13 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrRating, IgrRatingModule, IgrRatingSymbol, IgrRatingSymbolModule, IgrIcon, IgrIconModule, registerIconFromText } from 'igniteui-react';
+import { IgrRating, IgrRatingSymbol, IgrIcon, registerIconFromText } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrRatingModule.register();
-IgrRatingSymbolModule.register();
-IgrIconModule.register();
-
 const bandageIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="bdbandage-desc bdbandage-title" fit="" preserveAspectRatio="xMidYMid meet"><title id="bdbandage-title">Bandage Icon</title><desc id="bdbandage-desc">A picture depicting a bandage.</desc><path d="M3.212 10.03a3 3 0 010-4.242l2.576-2.576a3 3 0 014.242 0l.556.556-6.818 6.818zm17.5.334L10.364 20.707a4 4 0 01-5.657 0l-1.414-1.414a4 4 0 010-5.657L13.636 3.293a4 4 0 015.657 0l1.414 1.414a4 4 0 010 5.657zM14 5a1 1 0 101-1 1 1 0 00-1 1zm-2.5 2.5a1 1 0 101-1 1 1 0 00-1 1zM9 10a1 1 0 101-1 1 1 0 00-1 1zm-4 6a1 1 0 10-1-1 1 1 0 001 1zm1.75 2.25a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zm.75 3.25a1 1 0 10-1-1 1 1 0 001 1zM10 19a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zm1.75 2.25a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zM15 14a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zm1.75 2.25a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zM20 9a1 1 0 10-1 1 1 1 0 001-1zm.232 4.414l-6.818 6.818.556.556a3 3 0 004.242 0l2.576-2.576a3 3 0 000-4.242z"></path></svg>';
 const bacteriaIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="bcbacteria-desc bcbacteria-title" fit="" preserveAspectRatio="xMidYMid meet"><title id="bcbacteria-title">Bacteria Icon</title><desc id="bcbacteria-desc">A picture depicting a bacteria.</desc><path d="M20.867 7.664h-1.3a4.439 4.439 0 00-.467-1.157l.914-.915a1.132 1.132 0 00-1.6-1.6l-.915.914a4.477 4.477 0 00-1.157-.478V3.133a1.133 1.133 0 10-2.265 0v1.294a4.491 4.491 0 00-1.157.478L12 3.991a1.132 1.132 0 00-1.6 1.6l.8.8L9.6 8l-.8-.8a1.133 1.133 0 10-1.6 1.6l.8.8-1.6 1.6-.8-.8A1.132 1.132 0 004 12l.914.914a4.453 4.453 0 00-.477 1.157H3.133a1.133 1.133 0 100 2.265h1.3a4.439 4.439 0 00.477 1.157l-.914.915a1.132 1.132 0 001.6 1.6l.915-.914a4.439 4.439 0 001.157.477v1.3a1.133 1.133 0 102.265 0v-1.3a4.453 4.453 0 001.157-.477l.914.914a1.132 1.132 0 001.6-1.6l-.8-.8 1.6-1.6.8.8a1.133 1.133 0 101.6-1.6l-.8-.8 1.6-1.6.8.8a1.132 1.132 0 101.6-1.6l-.914-.914a4.453 4.453 0 00.477-1.157h1.3a1.133 1.133 0 100-2.265zM15 11a2 2 0 112-2 2 2 0 01-2 2zm-5.5 5a1.5 1.5 0 111.5-1.5A1.5 1.5 0 019.5 16z"></path></svg>';
 
@@ -23,25 +19,25 @@ export default class RatingEmptyAndSelected extends React.Component<any, any> {
         return (
             <div className="container sample">                
                     <IgrRating>
-                        <IgrRatingSymbol key="0">
-                            <div key="div0"><IgrIcon name='bandage' collection="material" key="default0"></IgrIcon></div>
-                            <div key="empty-div0" slot='empty'><IgrIcon name='bacteria' collection="material" key="empty0"></IgrIcon></div> 
+                        <IgrRatingSymbol>
+                            <div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
+                            <div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div> 
                         </IgrRatingSymbol>
-                         <IgrRatingSymbol key="1">
-                            <div key="div1"><IgrIcon name='bandage' collection="material" key="default1"></IgrIcon></div>
-                            <div key="empty-div1" slot='empty'><IgrIcon name='bacteria' collection="material" key="empty1"></IgrIcon></div>                           
+                         <IgrRatingSymbol>
+                            <div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
+                            <div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>                           
                         </IgrRatingSymbol>
-                        <IgrRatingSymbol key="2">
-                            <div key="div2"><IgrIcon name='bandage' collection="material" key="default2"></IgrIcon></div>
-                            <div key="empty-div2" slot='empty'><IgrIcon name='bacteria' collection="material" key="empty2"></IgrIcon></div>                           
+                        <IgrRatingSymbol>
+                            <div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
+                            <div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>                           
                         </IgrRatingSymbol>
-                        <IgrRatingSymbol key="3">
-                            <div key="div3"><IgrIcon name='bandage' collection="material" key="default3"></IgrIcon></div>
-                            <div key="empty-div3" slot='empty'><IgrIcon name='bacteria' collection="material" key="empty3"></IgrIcon></div>                           
+                        <IgrRatingSymbol>
+                            <div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
+                            <div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>                           
                         </IgrRatingSymbol> 
-                        <IgrRatingSymbol key="4">
-                            <div key="div4"><IgrIcon name='bandage' collection="material" key="default4"></IgrIcon></div>
-                            <div key="empty-div4" slot='empty'><IgrIcon name='bacteria' collection="material" key="empty4"></IgrIcon></div>                           
+                        <IgrRatingSymbol>
+                            <div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
+                            <div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>                           
                         </IgrRatingSymbol>
                     </IgrRating>                                                      
             </div>
diff --git a/samples/inputs/rating/single-selection/src/index.tsx b/samples/inputs/rating/single-selection/src/index.tsx
index d30e68a49d..22c5779788 100644
--- a/samples/inputs/rating/single-selection/src/index.tsx
+++ b/samples/inputs/rating/single-selection/src/index.tsx
@@ -1,12 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrRating, IgrRatingModule, IgrRatingSymbol, IgrRatingSymbolModule, IgrIconModule } from 'igniteui-react';
+import { IgrRating, IgrRatingSymbol } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrRatingModule.register();
-IgrRatingSymbolModule.register();
-IgrIconModule.register();
 export default class RatingSingleSelection extends React.Component<any, any> {
 
     constructor(props: any) {
@@ -17,25 +14,25 @@ export default class RatingSingleSelection extends React.Component<any, any> {
         return (
             <div className="container sample">                
                     <IgrRating label="Rate Experience" single={true}>
-                        <IgrRatingSymbol key="0">                           
-                            <div key="div0">😣</div>
-                            <div key="empty-div0" slot="empty">😣</div>
+                        <IgrRatingSymbol>                           
+                            <div>😣</div>
+                            <div slot="empty">😣</div>
                         </IgrRatingSymbol>
-                        <IgrRatingSymbol key="1">                           
-                            <div key="div1">😔</div>
-                            <div key="empty-div1" slot="empty">😔</div>
+                        <IgrRatingSymbol>                           
+                            <div>😔</div>
+                            <div slot="empty">😔</div>
                         </IgrRatingSymbol>
-                        <IgrRatingSymbol key="2">                           
-                            <div key="div2">😐</div>
-                            <div key="empty-div2" slot="empty">😐</div>
+                        <IgrRatingSymbol>                           
+                            <div>😐</div>
+                            <div slot="empty">😐</div>
                         </IgrRatingSymbol>
-                        <IgrRatingSymbol key="3">                           
-                            <div key="div3">🙂</div>
-                            <div key="empty-div3" slot="empty">🙂</div>
+                        <IgrRatingSymbol>                           
+                            <div>🙂</div>
+                            <div slot="empty">🙂</div>
                         </IgrRatingSymbol>
-                        <IgrRatingSymbol key="4">                           
-                            <div key="div4">😆</div>
-                            <div key="empty-div4" slot="empty">😆</div>
+                        <IgrRatingSymbol>                           
+                            <div>😆</div>
+                            <div slot="empty">😆</div>
                         </IgrRatingSymbol>                         
                     </IgrRating>                                                      
             </div>
diff --git a/samples/inputs/rating/styling/src/index.tsx b/samples/inputs/rating/styling/src/index.tsx
index 90ba0319e0..bb41096530 100644
--- a/samples/inputs/rating/styling/src/index.tsx
+++ b/samples/inputs/rating/styling/src/index.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrRating, IgrRatingModule,} from 'igniteui-react';
+import { IgrRating } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrRatingModule.register();
-
 export default class RatingStyling extends React.Component<any, any> {
 
     constructor(props: any) {