chore: IconField icon demo usage updates

Author: tugcekucukoglu

apps/showcase/demo/iconfield/basic-demo.tsx

@@ -5,12 +5,16 @@ export default function BasicDemo() {
     return (
         <div className="card flex flex-wrap justify-center gap-4">
             <IconField>
-                <IconField.Icon className="pi pi-search" />
+                <IconField.Icon>
+                    <i className="pi pi-search" />
+                </IconField.Icon>
                 <InputText placeholder="Search" />
             </IconField>
             <IconField>
                 <InputText variant="filled" />
-                <IconField.Icon className="pi pi-spin pi-spinner" />
+                <IconField.Icon>
+                    <i className="pi pi-spin pi-spinner" />
+                </IconField.Icon>
             </IconField>
         </div>
     );

apps/showcase/demo/iconfield/float-label-demo.tsx

@@ -12,23 +12,29 @@ export default function FloatLabelDemo() {
         <div className="card flex flex-wrap justify-center items-end gap-4">
             <Label.Float>
                 <IconField>
-                    <IconField.Icon className="pi pi-search" />
+                    <IconField.Icon>
+                        <i className="pi pi-search" />
+                    </IconField.Icon>
                     <InputText value={value1} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue1(e.currentTarget.value)} id="over_label" autoComplete="off" />
                 </IconField>
                 <Label htmlFor="over_label">Over Label</Label>
             </Label.Float>
 
             <Label.Float variant="in">
                 <IconField>
-                    <IconField.Icon className="pi pi-search" />
+                    <IconField.Icon>
+                        <i className="pi pi-search" />
+                    </IconField.Icon>
                     <InputText value={value2} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue2(e.currentTarget.value)} id="in_label" autoComplete="off" variant="filled" />
                 </IconField>
                 <Label htmlFor="in_label">In Label</Label>
             </Label.Float>
 
             <Label.Float variant="on">
                 <IconField>
-                    <IconField.Icon className="pi pi-search" />
+                    <IconField.Icon>
+                        <i className="pi pi-search" />
+                    </IconField.Icon>
                     <InputText value={value3} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue3(e.currentTarget.value)} id="on_label" autoComplete="off" />
                 </IconField>
                 <Label htmlFor="on_label">On Label</Label>

apps/showcase/demo/iconfield/iconfield-pt.tsx

@@ -4,7 +4,9 @@ import { InputText } from 'primereact/inputtext';
 export default function IconFieldPTDemo() {
     return (
         <IconField>
-            <IconField.Icon className="pi pi-search" />
+            <IconField.Icon>
+                <i className="pi pi-search" />
+            </IconField.Icon>
             <InputText placeholder="Search" />
         </IconField>
     );

apps/showcase/demo/iconfield/ifta-label-demo.tsx

@@ -7,7 +7,9 @@ export default function IftaLabelDemo() {
         <div className="card flex justify-center">
             <Label.Ifta>
                 <IconField>
-                    <IconField.Icon className="pi pi-user" />
+                    <IconField.Icon>
+                        <i className="pi pi-user" />
+                    </IconField.Icon>
                     <InputText id="username" autoComplete="off" variant="filled" />
                 </IconField>
                 <Label htmlFor="username">Username</Label>

apps/showcase/demo/iconfield/sizes-demo.tsx

@@ -5,19 +5,27 @@ export default function SizesDemo() {
     return (
         <div className="card flex flex-col items-center gap-4">
             <IconField>
-                <IconField.Icon className="pi pi-search" />
+                <IconField.Icon>
+                    <i className="pi pi-search" />
+                </IconField.Icon>
                 <InputText placeholder="Small" size="small" />
             </IconField>
 
             <IconField>
                 <InputText placeholder="Normal" />
-                <IconField.Icon className="pi pi-user" />
+                <IconField.Icon>
+                    <i className="pi pi-user" />
+                </IconField.Icon>
             </IconField>
 
             <IconField>
-                <IconField.Icon className="pi pi-lock" />
+                <IconField.Icon>
+                    <i className="pi pi-lock" />
+                </IconField.Icon>
                 <InputText placeholder="Large" size="large" />
-                <IconField.Icon className="pi pi-spin pi-spinner" />
+                <IconField.Icon>
+                    <i className="pi pi-spin pi-spinner" />
+                </IconField.Icon>
             </IconField>
         </div>
     );