diff --git a/angular.json b/angular.json
index 29d34b6a331..3ff4f70e5a9 100644
--- a/angular.json
+++ b/angular.json
@@ -118,5 +118,8 @@
                 }
             }
         }
+    },
+    "cli": {
+      "analytics": false
     }
 }
\ No newline at end of file
diff --git a/src/app/components/iconfield/iconfield.css b/src/app/components/iconfield/iconfield.css
new file mode 100644
index 00000000000..7efe09a8a15
--- /dev/null
+++ b/src/app/components/iconfield/iconfield.css
@@ -0,0 +1,5 @@
+@layer primeng {
+    .p-icon-field {
+        position: relative;
+    }    
+}
\ No newline at end of file
diff --git a/src/app/components/iconfield/iconfield.ts b/src/app/components/iconfield/iconfield.ts
new file mode 100755
index 00000000000..44ce8e9a958
--- /dev/null
+++ b/src/app/components/iconfield/iconfield.ts
@@ -0,0 +1,37 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation } from '@angular/core';
+
+import { SharedModule } from 'primeng/api';
+
+/**
+ * IconField wraps an input and an icon.
+ * @group Components
+ */
+@Component({
+    selector: 'p-iconField',
+    template: ` <span class="p-icon-field" [ngClass]="containerClass"><ng-content></ng-content> </span>`,
+    styleUrl: './iconfield.css',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IconField {
+    /**
+     * Position of the icon.
+     * @group Props
+     */
+    @Input() iconPosition: 'right' | 'left' = 'left';
+
+    get containerClass() {
+        return {
+            'p-icon-field-left': this.iconPosition === 'left',
+            'p-icon-field-right': this.iconPosition === 'right'
+        };
+    }
+}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [IconField, SharedModule],
+    declarations: [IconField]
+})
+export class IconFieldModule {}
diff --git a/src/app/components/iconfield/ng-package.json b/src/app/components/iconfield/ng-package.json
new file mode 100644
index 00000000000..ab5467eb7e4
--- /dev/null
+++ b/src/app/components/iconfield/ng-package.json
@@ -0,0 +1,6 @@
+{
+    "$schema": "ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public_api.ts"
+    }
+  }
\ No newline at end of file
diff --git a/src/app/components/iconfield/public_api.ts b/src/app/components/iconfield/public_api.ts
new file mode 100644
index 00000000000..05de3a12fe6
--- /dev/null
+++ b/src/app/components/iconfield/public_api.ts
@@ -0,0 +1,2 @@
+export * from './iconfield';
+
diff --git a/src/app/components/inputicon/inputicon.css b/src/app/components/inputicon/inputicon.css
new file mode 100755
index 00000000000..0e8f3cadbaf
--- /dev/null
+++ b/src/app/components/inputicon/inputicon.css
@@ -0,0 +1,6 @@
+@layer primeng {
+    .p-fluid .p-icon-field-left,
+    .p-fluid .p-icon-field-right {
+        width: 100%;
+    }
+}
diff --git a/src/app/components/inputicon/inputicon.ts b/src/app/components/inputicon/inputicon.ts
new file mode 100755
index 00000000000..3c4a9b32b9d
--- /dev/null
+++ b/src/app/components/inputicon/inputicon.ts
@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation } from '@angular/core';
+import { SharedModule } from 'primeng/api';
+
+/**
+ * InputIcon displays an icon.
+ * @group Components
+ */
+@Component({
+    selector: 'p-inputIcon',
+    template: `<span class="p-input-icon" [ngClass]="styleClass"><ng-content></ng-content></span>`,
+    styleUrl: './inputicon.css',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class InputIcon {
+    /**
+     * Style class of the element.
+     * @group Props
+     */
+    @Input() styleClass: string | undefined;
+}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [InputIcon, SharedModule],
+    declarations: [InputIcon]
+})
+export class InputIconModule {}
diff --git a/src/app/components/inputicon/ng-package.json b/src/app/components/inputicon/ng-package.json
new file mode 100644
index 00000000000..ab5467eb7e4
--- /dev/null
+++ b/src/app/components/inputicon/ng-package.json
@@ -0,0 +1,6 @@
+{
+    "$schema": "ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public_api.ts"
+    }
+  }
\ No newline at end of file
diff --git a/src/app/components/inputicon/public_api.ts b/src/app/components/inputicon/public_api.ts
new file mode 100644
index 00000000000..ca6c47fe6fb
--- /dev/null
+++ b/src/app/components/inputicon/public_api.ts
@@ -0,0 +1 @@
+export * from './inputicon';
diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json
index d628759bbaa..bb40ee13c77 100644
--- a/src/app/showcase/doc/apidoc/index.json
+++ b/src/app/showcase/doc/apidoc/index.json
@@ -3102,6 +3102,12 @@
                             "optional": true,
                             "readonly": false,
                             "type": "string"
+                        },
+                        {
+                            "name": "listLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string"
                         }
                     ]
                 }
@@ -3761,7 +3767,7 @@
                             "optional": false,
                             "readonly": false,
                             "type": "boolean",
-                            "default": "false",
+                            "default": "true",
                             "description": "Whether to show the empty message or not."
                         },
                         {
@@ -4446,7 +4452,7 @@
                             "name": "severity",
                             "optional": false,
                             "readonly": false,
-                            "type": "\"success\" | \"warning\" | \"info\" | \"danger\"",
+                            "type": "\"success\" | \"info\" | \"warning\" | \"danger\"",
                             "description": "Severity type of the badge."
                         }
                     ]
@@ -4482,7 +4488,7 @@
                             "name": "severity",
                             "optional": false,
                             "readonly": false,
-                            "type": "\"success\" | \"warning\" | \"info\" | \"danger\"",
+                            "type": "\"success\" | \"info\" | \"warning\" | \"danger\"",
                             "description": "Severity type of the badge."
                         },
                         {
@@ -9554,8 +9560,7 @@
                             "name": "placeholder",
                             "optional": false,
                             "readonly": false,
-                            "type": "string",
-                            "description": "Default text to display when no option is selected."
+                            "type": "Signal<string>"
                         },
                         {
                             "name": "filterPlaceholder",
@@ -10026,6 +10031,16 @@
                             "name": "focus",
                             "parameters": [],
                             "description": "Applies focus."
+                        },
+                        {
+                            "name": "clear",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "Event"
+                                }
+                            ],
+                            "description": "Clears the model."
                         }
                     ]
                 }
@@ -12082,6 +12097,26 @@
             }
         }
     },
+    "iconfield": {
+        "components": {
+            "IconField": {
+                "description": "IconField wraps an input and an icon.",
+                "props": {
+                    "description": "Defines the input properties of the component.",
+                    "values": [
+                        {
+                            "name": "iconPosition",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "\"left\" | \"right\"",
+                            "default": "left",
+                            "description": "Position of the icon."
+                        }
+                    ]
+                }
+            }
+        }
+    },
     "angledoubledown": {
         "components": {}
     },
@@ -12657,6 +12692,25 @@
             }
         }
     },
+    "inputicon": {
+        "components": {
+            "InputIcon": {
+                "description": "InputIcon displays an icon.",
+                "props": {
+                    "description": "Defines the input properties of the component.",
+                    "values": [
+                        {
+                            "name": "styleClass",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the element."
+                        }
+                    ]
+                }
+            }
+        }
+    },
     "inputmask": {
         "components": {
             "InputMask": {
@@ -15124,7 +15178,6 @@
                             "optional": false,
                             "readonly": false,
                             "type": "string",
-                            "default": "{0} items selected",
                             "description": "Label to display after exceeding max selected labels e.g. ({0} items selected), defaults \"ellipsis\" keyword to indicate a text-overflow."
                         },
                         {
@@ -15383,7 +15436,7 @@
                             "name": "placeholder",
                             "optional": false,
                             "readonly": false,
-                            "type": "string"
+                            "type": "Signal<string>"
                         },
                         {
                             "name": "options",
@@ -18671,6 +18724,13 @@
                             "type": "string",
                             "default": "2s",
                             "description": "Duration of the rotate animation."
+                        },
+                        {
+                            "name": "ariaLabel",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Used to define a aria label attribute the current element."
                         }
                     ]
                 }
diff --git a/src/app/showcase/doc/iconfield/accessibilitydoc.ts b/src/app/showcase/doc/iconfield/accessibilitydoc.ts
new file mode 100644
index 00000000000..2b0a0694488
--- /dev/null
+++ b/src/app/showcase/doc/iconfield/accessibilitydoc.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'accessibility-doc',
+    template: ` <app-docsectiontext>
+        <h3>Screen Reader</h3>
+        <p>IconField and InputIcon does not require any roles and attributes.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Components does not include any interactive elements.</p>
+    </app-docsectiontext>`
+})
+export class AccessibilityDoc {}
diff --git a/src/app/showcase/doc/iconfield/basicdoc.ts b/src/app/showcase/doc/iconfield/basicdoc.ts
new file mode 100644
index 00000000000..e3ef45ac3c6
--- /dev/null
+++ b/src/app/showcase/doc/iconfield/basicdoc.ts
@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { Code } from '../../domain/code';
+
+@Component({
+    selector: 'basic-doc',
+    template: `
+        <app-docsectiontext>
+            <p>
+                A group is created by wrapping the input and icon with the IconField component. Each icon is defined as a child of InputIcon component. In addition, position of the icon can be changed using iconPosition property that the default
+                value is right and also left option is available.
+            </p>
+        </app-docsectiontext>
+        <div class="card flex justify-content-center">
+            <p-iconField iconPosition="left">
+                <p-inputIcon styleClass="pi pi-search" />
+                <input type="text" pInputText />
+            </p-iconField>
+        </div>
+        <app-code [code]="code" selector="iconfield-basic-demo"></app-code>
+    `
+})
+export class BasicDoc {
+    code: Code = {
+        basic: `<p-iconField iconPosition="left">
+<p-inputIcon styleClass="pi pi-search" />
+    <input type="text" pInputText />
+</p-iconField>`,
+        html: `<div class="card flex justify-content-center">
+    <p-iconField iconPosition="left">
+        <p-inputIcon styleClass="pi pi-search" />
+        <input type="text" pInputText />
+    </p-iconField>
+</div>`,
+        typescript: `
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'iconField-basic-demo',
+    templateUrl: './iconField-basic-demo.html'
+})
+export class IconFieldBasicDemo {}`
+    };
+}
diff --git a/src/app/showcase/doc/iconfield/iconfielddoc.module.ts b/src/app/showcase/doc/iconfield/iconfielddoc.module.ts
new file mode 100644
index 00000000000..2400e42628a
--- /dev/null
+++ b/src/app/showcase/doc/iconfield/iconfielddoc.module.ts
@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { InputTextModule } from 'primeng/inputtext';
+import { AppDocModule } from '../../layout/doc/app.doc.module';
+import { AppCodeModule } from '../../layout/doc/app.code.component';
+import { BasicDoc } from './basicdoc';
+import { ImportDoc } from './importdoc';
+import { IconFieldModule } from 'src/app/components/iconfield/iconfield';
+import { InputIconModule } from 'src/app/components/inputicon/inputicon';
+import { FormsModule } from '@angular/forms';
+import { AccessibilityDoc } from './accessibilitydoc';
+
+@NgModule({
+    imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, InputTextModule, IconFieldModule, InputIconModule, FormsModule],
+    declarations: [BasicDoc, ImportDoc, AccessibilityDoc],
+    exports: [AppDocModule]
+})
+export class IconFieldDocModule {}
diff --git a/src/app/showcase/doc/iconfield/importdoc.ts b/src/app/showcase/doc/iconfield/importdoc.ts
new file mode 100644
index 00000000000..ee004cf1b80
--- /dev/null
+++ b/src/app/showcase/doc/iconfield/importdoc.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { Code } from '../../domain/code';
+
+@Component({
+    selector: 'import-doc',
+    template: `<app-code [code]="code" [hideToggleCode]="true"></app-code> `
+})
+export class ImportDoc {
+    code: Code = {
+        typescript: `import { IconField } from 'primeng/iconfield';`
+    };
+}
diff --git a/src/app/showcase/layout/app.routes.ts b/src/app/showcase/layout/app.routes.ts
index 073f7c86dc0..64a2550b1c9 100644
--- a/src/app/showcase/layout/app.routes.ts
+++ b/src/app/showcase/layout/app.routes.ts
@@ -47,6 +47,7 @@ export const routes: Routes = [
             { path: 'dynamicdialog', loadChildren: () => import('../pages/dynamicdialog/dynamicdialogdemo.module').then((m) => m.DynamicDialogDemoModule) },
             { path: 'dragdrop', loadChildren: () => import('../pages/dragdrop/dragdropdemo.module').then((m) => m.DragDropDemoModule) },
             { path: 'dropdown', loadChildren: () => import('../pages/dropdown/dropdowndemo.module').then((m) => m.DropdownDemoModule) },
+            { path: 'iconfield', loadChildren: () => import('../pages/iconfield/iconfielddemo.module').then((m) => m.IconFieldDemoModule) },
             { path: 'editor', loadChildren: () => import('../pages/editor/editordemo.module').then((m) => m.EditorDemoModule) },
             { path: 'fieldset', loadChildren: () => import('../pages/fieldset/fieldsetdemo.module').then((m) => m.FieldsetDemoModule) },
             { path: 'fileupload', loadChildren: () => import('../pages/fileupload/fileuploaddemo.module').then((m) => m.FileUploadDemoModule) },
diff --git a/src/app/showcase/pages/iconfield/iconfielddemo-routing.module.ts b/src/app/showcase/pages/iconfield/iconfielddemo-routing.module.ts
new file mode 100755
index 00000000000..0571c92f0e3
--- /dev/null
+++ b/src/app/showcase/pages/iconfield/iconfielddemo-routing.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { IconFieldDemo } from './iconfielddemo';
+
+
+@NgModule({
+    imports: [RouterModule.forChild([{ path: '', component: IconFieldDemo }])],
+    exports: [RouterModule]
+})
+export class IconFieldDemoRoutingModule {}
diff --git a/src/app/showcase/pages/iconfield/iconfielddemo.html b/src/app/showcase/pages/iconfield/iconfielddemo.html
new file mode 100755
index 00000000000..47931d93c4a
--- /dev/null
+++ b/src/app/showcase/pages/iconfield/iconfielddemo.html
@@ -0,0 +1 @@
+<app-doc docTitle="Angular IconField Component" header="IconField" description="IconField wraps an input and an icon." [docs]="docs" [apiDocs]="['IconField', 'InputIcon']"></app-doc>
\ No newline at end of file
diff --git a/src/app/showcase/pages/iconfield/iconfielddemo.module.ts b/src/app/showcase/pages/iconfield/iconfielddemo.module.ts
new file mode 100755
index 00000000000..2caf9274ca2
--- /dev/null
+++ b/src/app/showcase/pages/iconfield/iconfielddemo.module.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { IconFieldDemo } from './iconfielddemo';
+import { IconFieldDocModule } from '../../doc/iconfield/iconfielddoc.module';
+import { IconFieldDemoRoutingModule } from './iconfielddemo-routing.module';
+
+
+@NgModule({
+    imports: [CommonModule, IconFieldDocModule, IconFieldDemoRoutingModule],
+    declarations: [IconFieldDemo]
+})
+export class IconFieldDemoModule {}
diff --git a/src/app/showcase/pages/iconfield/iconfielddemo.scss b/src/app/showcase/pages/iconfield/iconfielddemo.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/showcase/pages/iconfield/iconfielddemo.ts b/src/app/showcase/pages/iconfield/iconfielddemo.ts
new file mode 100755
index 00000000000..c729f4d0a87
--- /dev/null
+++ b/src/app/showcase/pages/iconfield/iconfielddemo.ts
@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { BasicDoc } from '../../doc/iconfield/basicdoc';
+import { ImportDoc } from '../../doc/iconfield/importdoc';
+import { AccessibilityDoc } from '../../doc/iconfield/accessibilitydoc';
+
+@Component({
+    templateUrl: './iconfielddemo.html',
+    styleUrls: ['./iconfielddemo.scss']
+})
+export class IconFieldDemo {
+    docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        },
+    
+    ];
+}
diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css
index 826904c446f..61aadd4813f 100644
--- a/src/assets/components/themes/arya-blue/theme.css
+++ b/src/assets/components/themes/arya-blue/theme.css
@@ -1065,6 +1065,12 @@
     border-color: #ef9a9a;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.6);
@@ -1135,6 +1141,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #ef9a9a;
   }
diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css
index e03fffa3598..3d798d14c92 100644
--- a/src/assets/components/themes/arya-green/theme.css
+++ b/src/assets/components/themes/arya-green/theme.css
@@ -1065,6 +1065,12 @@
     border-color: #ef9a9a;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.6);
@@ -1135,6 +1141,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #ef9a9a;
   }
diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css
index 8cd8c32ab51..53bd37b0554 100644
--- a/src/assets/components/themes/arya-orange/theme.css
+++ b/src/assets/components/themes/arya-orange/theme.css
@@ -1065,6 +1065,12 @@
     border-color: #ef9a9a;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.6);
@@ -1135,6 +1141,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #ef9a9a;
   }
diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css
index 8eceecc17ab..79e18605807 100644
--- a/src/assets/components/themes/arya-purple/theme.css
+++ b/src/assets/components/themes/arya-purple/theme.css
@@ -1065,6 +1065,12 @@
     border-color: #ef9a9a;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.6);
@@ -1135,6 +1141,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #ef9a9a;
   }
diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
index 2e8030b48c6..a883adb3239 100644
--- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css
+++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
@@ -1069,6 +1069,12 @@
     border-color: #f19ea6;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #2a323d;
     color: rgba(255, 255, 255, 0.6);
@@ -1139,6 +1145,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #f19ea6;
   }
diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
index 9e574382dc0..2f31d744a89 100644
--- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css
+++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
@@ -1069,6 +1069,12 @@
     border-color: #f19ea6;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #2a323d;
     color: rgba(255, 255, 255, 0.6);
@@ -1139,6 +1145,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #f19ea6;
   }
diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css
index 9933f933730..1fccc8fbaa2 100644
--- a/src/assets/components/themes/bootstrap4-light-blue/theme.css
+++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css
@@ -1069,6 +1069,12 @@
     border-color: #dc3545;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #e9ecef;
     color: #495057;
@@ -1139,6 +1145,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #495057;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #495057;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #dc3545;
   }
diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css
index 18860fef36a..d48c8faed77 100644
--- a/src/assets/components/themes/bootstrap4-light-purple/theme.css
+++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css
@@ -1069,6 +1069,12 @@
     border-color: #dc3545;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #e9ecef;
     color: #495057;
@@ -1139,6 +1145,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #495057;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #495057;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #dc3545;
   }
diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css
index 731b7ba30d5..224e861ebf7 100644
--- a/src/assets/components/themes/fluent-light/theme.css
+++ b/src/assets/components/themes/fluent-light/theme.css
@@ -1065,6 +1065,12 @@
     border-color: #a4252c;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #f3f2f1;
     color: #605e5c;
@@ -1135,6 +1141,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #605e5c;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #605e5c;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #a4252c;
   }
diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css
index 06e494801ad..1d1e385e502 100644
--- a/src/assets/components/themes/lara-dark-blue/theme.css
+++ b/src/assets/components/themes/lara-dark-blue/theme.css
@@ -1082,6 +1082,12 @@
     border-color: #fca5a5;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #1f2937;
     color: rgba(255, 255, 255, 0.6);
@@ -1152,6 +1158,16 @@
     width: 3rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #fca5a5;
   }
diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css
index 6fb191d2c89..6485aa86b26 100644
--- a/src/assets/components/themes/lara-dark-indigo/theme.css
+++ b/src/assets/components/themes/lara-dark-indigo/theme.css
@@ -1082,6 +1082,12 @@
     border-color: #fca5a5;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #1f2937;
     color: rgba(255, 255, 255, 0.6);
@@ -1152,6 +1158,16 @@
     width: 3rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #fca5a5;
   }
diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css
index 278966af800..896d0787ee9 100644
--- a/src/assets/components/themes/lara-dark-purple/theme.css
+++ b/src/assets/components/themes/lara-dark-purple/theme.css
@@ -1082,6 +1082,12 @@
     border-color: #fca5a5;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #1f2937;
     color: rgba(255, 255, 255, 0.6);
@@ -1152,6 +1158,16 @@
     width: 3rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #fca5a5;
   }
diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css
index 8118d1b873b..2bbd2c66490 100644
--- a/src/assets/components/themes/lara-dark-teal/theme.css
+++ b/src/assets/components/themes/lara-dark-teal/theme.css
@@ -1082,6 +1082,12 @@
     border-color: #fca5a5;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #1f2937;
     color: rgba(255, 255, 255, 0.6);
@@ -1152,6 +1158,16 @@
     width: 3rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #fca5a5;
   }
diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css
index 2a62954fab8..7f067f10133 100644
--- a/src/assets/components/themes/lara-light-blue/theme.css
+++ b/src/assets/components/themes/lara-light-blue/theme.css
@@ -1082,6 +1082,12 @@
     border-color: #e24c4c;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #f3f4f6;
     color: #6b7280;
@@ -1152,6 +1158,16 @@
     width: 3rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #e24c4c;
   }
diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css
index 2974a643020..a46ce4e78ab 100644
--- a/src/assets/components/themes/lara-light-indigo/theme.css
+++ b/src/assets/components/themes/lara-light-indigo/theme.css
@@ -1082,6 +1082,12 @@
     border-color: #e24c4c;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #f3f4f6;
     color: #6b7280;
@@ -1152,6 +1158,16 @@
     width: 3rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #e24c4c;
   }
diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css
index 8b0976b250f..4d64bb5d2d0 100644
--- a/src/assets/components/themes/lara-light-purple/theme.css
+++ b/src/assets/components/themes/lara-light-purple/theme.css
@@ -1082,6 +1082,12 @@
     border-color: #e24c4c;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #f3f4f6;
     color: #6b7280;
@@ -1152,6 +1158,16 @@
     width: 3rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #e24c4c;
   }
diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css
index 359f03e5362..89806acf4a9 100644
--- a/src/assets/components/themes/lara-light-teal/theme.css
+++ b/src/assets/components/themes/lara-light-teal/theme.css
@@ -1082,6 +1082,12 @@
     border-color: #e24c4c;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #f3f4f6;
     color: #6b7280;
@@ -1152,6 +1158,16 @@
     width: 3rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #e24c4c;
   }
diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css
index 1e165c183e4..6ecf58877e3 100644
--- a/src/assets/components/themes/luna-amber/theme.css
+++ b/src/assets/components/themes/luna-amber/theme.css
@@ -1069,6 +1069,12 @@
     border-color: #e57373;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #252525;
     color: #888888;
@@ -1139,6 +1145,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #888888;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #888888;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #e57373;
   }
diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css
index 0b83a4ee11a..690ca30a506 100644
--- a/src/assets/components/themes/luna-blue/theme.css
+++ b/src/assets/components/themes/luna-blue/theme.css
@@ -1069,6 +1069,12 @@
     border-color: #e57373;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #252525;
     color: #888888;
@@ -1139,6 +1145,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #888888;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #888888;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #e57373;
   }
diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css
index ec637309407..9d63a533f6a 100644
--- a/src/assets/components/themes/luna-green/theme.css
+++ b/src/assets/components/themes/luna-green/theme.css
@@ -1069,6 +1069,12 @@
     border-color: #e57373;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #252525;
     color: #888888;
@@ -1139,6 +1145,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #888888;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #888888;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #e57373;
   }
diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css
index 9f8cc241d35..b60e2379949 100644
--- a/src/assets/components/themes/luna-pink/theme.css
+++ b/src/assets/components/themes/luna-pink/theme.css
@@ -1069,6 +1069,12 @@
     border-color: #e57373;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #252525;
     color: #888888;
@@ -1139,6 +1145,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #888888;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #888888;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #e57373;
   }
diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css
index 917acca6a2a..54a6c748921 100644
--- a/src/assets/components/themes/md-dark-deeppurple/theme.css
+++ b/src/assets/components/themes/md-dark-deeppurple/theme.css
@@ -1088,6 +1088,12 @@
     border-color: #f44435;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.6);
@@ -1158,6 +1164,16 @@
     width: 3rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #f44435;
   }
diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css
index d3a215d5b96..129ec07972b 100644
--- a/src/assets/components/themes/md-dark-indigo/theme.css
+++ b/src/assets/components/themes/md-dark-indigo/theme.css
@@ -1088,6 +1088,12 @@
     border-color: #f44435;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.6);
@@ -1158,6 +1164,16 @@
     width: 3rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #f44435;
   }
diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css
index 95fc4f3f7ac..78b119e9cd3 100644
--- a/src/assets/components/themes/md-light-deeppurple/theme.css
+++ b/src/assets/components/themes/md-light-deeppurple/theme.css
@@ -1088,6 +1088,12 @@
     border-color: #b00020;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #ffffff;
     color: rgba(0, 0, 0, 0.6);
@@ -1158,6 +1164,16 @@
     width: 3rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #b00020;
   }
diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css
index a34f6ec02b9..1e728dff8e5 100644
--- a/src/assets/components/themes/md-light-indigo/theme.css
+++ b/src/assets/components/themes/md-light-indigo/theme.css
@@ -1088,6 +1088,12 @@
     border-color: #b00020;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #ffffff;
     color: rgba(0, 0, 0, 0.6);
@@ -1158,6 +1164,16 @@
     width: 3rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #b00020;
   }
diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css
index 5895ad080df..d99b0f512f2 100644
--- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css
+++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css
@@ -1088,6 +1088,12 @@
     border-color: #f44435;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.6);
@@ -1158,6 +1164,16 @@
     width: 2.75rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #f44435;
   }
diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css
index 113d1c42c7d..eac23eb98a5 100644
--- a/src/assets/components/themes/mdc-dark-indigo/theme.css
+++ b/src/assets/components/themes/mdc-dark-indigo/theme.css
@@ -1088,6 +1088,12 @@
     border-color: #f44435;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.6);
@@ -1158,6 +1164,16 @@
     width: 2.75rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #f44435;
   }
diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css
index ed44bc5132d..3a7f9852f0f 100644
--- a/src/assets/components/themes/mdc-light-deeppurple/theme.css
+++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css
@@ -1088,6 +1088,12 @@
     border-color: #b00020;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #ffffff;
     color: rgba(0, 0, 0, 0.6);
@@ -1158,6 +1164,16 @@
     width: 2.75rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #b00020;
   }
diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css
index f0f9a852550..5334d2c8039 100644
--- a/src/assets/components/themes/mdc-light-indigo/theme.css
+++ b/src/assets/components/themes/mdc-light-indigo/theme.css
@@ -1088,6 +1088,12 @@
     border-color: #b00020;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #ffffff;
     color: rgba(0, 0, 0, 0.6);
@@ -1158,6 +1164,16 @@
     width: 2.75rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #b00020;
   }
diff --git a/src/assets/components/themes/mira/theme.css b/src/assets/components/themes/mira/theme.css
index 098569d429d..9b9778cc56f 100644
--- a/src/assets/components/themes/mira/theme.css
+++ b/src/assets/components/themes/mira/theme.css
@@ -1091,6 +1091,12 @@
     border-color: #bf616a;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #ffffff;
     color: #81a1c1;
@@ -1161,6 +1167,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #81a1c1;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #81a1c1;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #bf616a;
   }
diff --git a/src/assets/components/themes/nano/theme.css b/src/assets/components/themes/nano/theme.css
index a9b3c4b7abc..c1edd4c45b9 100644
--- a/src/assets/components/themes/nano/theme.css
+++ b/src/assets/components/themes/nano/theme.css
@@ -1065,6 +1065,12 @@
     border-color: #d8222f;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #dde1e6;
     color: #697077;
@@ -1135,6 +1141,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.25rem;
+    color: #697077;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.25rem;
+    color: #697077;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #d8222f;
   }
diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css
index 15c76b69f7a..eb6d8831d8d 100644
--- a/src/assets/components/themes/nova-accent/theme.css
+++ b/src/assets/components/themes/nova-accent/theme.css
@@ -1065,6 +1065,12 @@
     border-color: #a80000;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #eaeaea;
     color: #848484;
@@ -1135,6 +1141,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #848484;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #848484;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #a80000;
   }
diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css
index a7c600cbbbe..579009d6334 100644
--- a/src/assets/components/themes/nova-alt/theme.css
+++ b/src/assets/components/themes/nova-alt/theme.css
@@ -1069,6 +1069,12 @@
     border-color: #a80000;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #eaeaea;
     color: #848484;
@@ -1139,6 +1145,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #848484;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #848484;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #a80000;
   }
diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css
index 9ea0568c619..3d38d4e5c01 100644
--- a/src/assets/components/themes/nova/theme.css
+++ b/src/assets/components/themes/nova/theme.css
@@ -1069,6 +1069,12 @@
     border-color: #a80000;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #eaeaea;
     color: #848484;
@@ -1139,6 +1145,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #848484;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #848484;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #a80000;
   }
diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css
index c7e7d738112..541b007dbd2 100644
--- a/src/assets/components/themes/rhea/theme.css
+++ b/src/assets/components/themes/rhea/theme.css
@@ -1065,6 +1065,12 @@
     border-color: #e7a3a3;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #dbdbdb;
     color: #666666;
@@ -1135,6 +1141,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #a6a6a6;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #a6a6a6;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #e7a3a3;
   }
diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css
index 2778c14c019..3f688430269 100644
--- a/src/assets/components/themes/saga-blue/theme.css
+++ b/src/assets/components/themes/saga-blue/theme.css
@@ -1065,6 +1065,12 @@
     border-color: #f44336;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #e9ecef;
     color: #6c757d;
@@ -1135,6 +1141,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #6c757d;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #f44336;
   }
diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css
index 05b613de6f2..8ac1594cde8 100644
--- a/src/assets/components/themes/saga-green/theme.css
+++ b/src/assets/components/themes/saga-green/theme.css
@@ -1065,6 +1065,12 @@
     border-color: #f44336;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #e9ecef;
     color: #6c757d;
@@ -1135,6 +1141,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #6c757d;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #f44336;
   }
diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css
index 04d12a5607f..9302ff6c9ed 100644
--- a/src/assets/components/themes/saga-orange/theme.css
+++ b/src/assets/components/themes/saga-orange/theme.css
@@ -1065,6 +1065,12 @@
     border-color: #f44336;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #e9ecef;
     color: #6c757d;
@@ -1135,6 +1141,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #6c757d;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #f44336;
   }
diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css
index 3c23e8fd166..5531cc7afb7 100644
--- a/src/assets/components/themes/saga-purple/theme.css
+++ b/src/assets/components/themes/saga-purple/theme.css
@@ -1065,6 +1065,12 @@
     border-color: #f44336;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #e9ecef;
     color: #6c757d;
@@ -1135,6 +1141,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #6c757d;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #f44336;
   }
diff --git a/src/assets/components/themes/soho-dark/theme.css b/src/assets/components/themes/soho-dark/theme.css
index c29ee539461..f936d2eb183 100644
--- a/src/assets/components/themes/soho-dark/theme.css
+++ b/src/assets/components/themes/soho-dark/theme.css
@@ -1087,6 +1087,12 @@
     border-color: #ff9a9a;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #282936;
     color: rgba(255, 255, 255, 0.6);
@@ -1157,6 +1163,16 @@
     width: 3rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #ff9a9a;
   }
diff --git a/src/assets/components/themes/soho-light/theme.css b/src/assets/components/themes/soho-light/theme.css
index 742464f83cf..50273159d83 100644
--- a/src/assets/components/themes/soho-light/theme.css
+++ b/src/assets/components/themes/soho-light/theme.css
@@ -1087,6 +1087,12 @@
     border-color: #ff6767;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #f6f9fc;
     color: #708da9;
@@ -1157,6 +1163,16 @@
     width: 3rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #708da9;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #708da9;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #ff6767;
   }
diff --git a/src/assets/components/themes/tailwind-light/theme.css b/src/assets/components/themes/tailwind-light/theme.css
index 476678bf5ad..cfc3493813c 100644
--- a/src/assets/components/themes/tailwind-light/theme.css
+++ b/src/assets/components/themes/tailwind-light/theme.css
@@ -1101,6 +1101,12 @@
     border-color: #f0a9a7;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #fafafa;
     color: #71717a;
@@ -1171,6 +1177,16 @@
     width: 3rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #71717a;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #71717a;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #f0a9a7;
   }
diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css
index 970d2e5ac47..bf354cf1ce7 100644
--- a/src/assets/components/themes/vela-blue/theme.css
+++ b/src/assets/components/themes/vela-blue/theme.css
@@ -1065,6 +1065,12 @@
     border-color: #ef9a9a;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #1f2d40;
     color: rgba(255, 255, 255, 0.6);
@@ -1135,6 +1141,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #ef9a9a;
   }
diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css
index 6c562cb81aa..e3af26b3415 100644
--- a/src/assets/components/themes/vela-green/theme.css
+++ b/src/assets/components/themes/vela-green/theme.css
@@ -1065,6 +1065,12 @@
     border-color: #ef9a9a;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #1f2d40;
     color: rgba(255, 255, 255, 0.6);
@@ -1135,6 +1141,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #ef9a9a;
   }
diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css
index 683e53f2acc..dc654e9822d 100644
--- a/src/assets/components/themes/vela-orange/theme.css
+++ b/src/assets/components/themes/vela-orange/theme.css
@@ -1065,6 +1065,12 @@
     border-color: #ef9a9a;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #1f2d40;
     color: rgba(255, 255, 255, 0.6);
@@ -1135,6 +1141,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #ef9a9a;
   }
diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css
index 6247fddd7d9..b7503aa1723 100644
--- a/src/assets/components/themes/vela-purple/theme.css
+++ b/src/assets/components/themes/vela-purple/theme.css
@@ -1065,6 +1065,12 @@
     border-color: #ef9a9a;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #1f2d40;
     color: rgba(255, 255, 255, 0.6);
@@ -1135,6 +1141,16 @@
     width: 2.357rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #ef9a9a;
   }
diff --git a/src/assets/components/themes/viva-dark/theme.css b/src/assets/components/themes/viva-dark/theme.css
index 1dd6045cb43..d158f24fac4 100644
--- a/src/assets/components/themes/viva-dark/theme.css
+++ b/src/assets/components/themes/viva-dark/theme.css
@@ -1095,6 +1095,12 @@
     border-color: #f78c79;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #161d21;
     color: rgba(255, 255, 255, 0.6);
@@ -1165,6 +1171,16 @@
     width: 2.857rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #f78c79;
   }
diff --git a/src/assets/components/themes/viva-light/theme.css b/src/assets/components/themes/viva-light/theme.css
index 1e1b0a3a47a..05efd14ab13 100644
--- a/src/assets/components/themes/viva-light/theme.css
+++ b/src/assets/components/themes/viva-light/theme.css
@@ -1096,6 +1096,12 @@
     border-color: #f88c79;
   }
 
+  .p-icon-field .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+
   .p-inputgroup-addon {
     background: #f5f5f5;
     color: #898989;
@@ -1166,6 +1172,16 @@
     width: 2.857rem;
   }
 
+  .p-icon-field-left .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #898989;
+  }
+
+  .p-icon-field-right .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #898989;
+  }
+
   p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
     border-color: #f88c79;
   }
diff --git a/src/assets/showcase/data/menu.json b/src/assets/showcase/data/menu.json
index 5264d08626b..058a861d382 100644
--- a/src/assets/showcase/data/menu.json
+++ b/src/assets/showcase/data/menu.json
@@ -57,6 +57,10 @@
                             "name": "Editor",
                             "routerLink": "/editor"
                         },
+                        {
+                            "name": "IconField",
+                            "routerLink": "/iconfield"
+                        },
                         {
                             "name": "InputGroup",
                             "routerLink": "/inputgroup"