diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index bae12e574..a1219a0cf 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #323232;
   color: #dedede;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 6061b2cd8..6d6c87880 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #323232;
   color: #dedede;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index c7cb7798c..2507abd22 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #323232;
   color: #dedede;
diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css
index 60f5fdbb7..777346d7b 100644
--- a/public/themes/nova-colored/theme.css
+++ b/public/themes/nova-colored/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;
diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css
index 767e37a5c..cb99f1539 100644
--- a/public/themes/nova-dark/theme.css
+++ b/public/themes/nova-dark/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;
diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css
index 624bd3878..0ba23db7e 100644
--- a/public/themes/nova-light/theme.css
+++ b/public/themes/nova-light/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 4cfa8cf38..80ec3ed5e 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 4ef5a3611..d19200c15 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #666666;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index bbd980591..34bf4c6c2 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -668,6 +668,24 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index f7764984b..53732624d 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -668,6 +668,24 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index a1cec3288..40d553c82 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -668,6 +668,24 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index c53b806ef..4f57cf72c 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -668,6 +668,24 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 9bd4ab94d..d6e604534 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #34495E;
   color: #ebedef;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 5a3215734..6714616a0 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #34495E;
   color: #ebedef;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 30690302c..50ac6d371 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #34495E;
   color: #ebedef;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 4467f7e6f..28d0ba272 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #34495E;
   color: #ebedef;
diff --git a/src/components/inputtext/InputText.css b/src/components/inputtext/InputText.css
index 9d06e983b..5e94ab120 100755
--- a/src/components/inputtext/InputText.css
+++ b/src/components/inputtext/InputText.css
@@ -52,4 +52,16 @@
 .p-float-label .input:-webkit-autofill ~ label {
     top: -20px;
     font-size: 12px;
+}
+
+.p-input-icon-left,
+.p-input-icon-right {
+    position: relative;
+}
+
+.p-input-icon-left > i,
+.p-input-icon-right > i {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5em;
 }
\ No newline at end of file
diff --git a/src/views/inputtext/InputTextDemo.vue b/src/views/inputtext/InputTextDemo.vue
index 5d9e3f53f..df2cbf79c 100755
--- a/src/views/inputtext/InputTextDemo.vue
+++ b/src/views/inputtext/InputTextDemo.vue
@@ -18,8 +18,20 @@
                 <label for="username">Username</label>
             </span>
 
+            <h3>Left Icon</h3>
+            <span class="p-input-icon-left">
+                <i class="pi pi-search" />
+                <InputText type="text" v-model="value3" placeholder="Search" />
+            </span>
+
+            <h3>Right Icon</h3>
+            <span class="p-input-icon-right">
+                <i class="pi pi-spin pi-spinner" />
+                <InputText type="text" v-model="value4" />
+            </span>
+
             <h3>Disabled</h3>
-            <InputText type="text" v-model="value3" disabled />
+            <InputText type="text" v-model="value5" disabled />
 
              <h3>Invalid</h3>
             <InputText type="text" class="p-error" />
@@ -44,7 +56,9 @@ export default {
         return {
             value1: '',
             value2: '',
-            value3: 'PrimeVue'
+            value3: '',
+            value4: '',
+            value5: 'PrimeVue'
         }
     },
 	components: {
diff --git a/src/views/inputtext/InputTextDoc.vue b/src/views/inputtext/InputTextDoc.vue
index 9d624add1..e71f3cd3c 100755
--- a/src/views/inputtext/InputTextDoc.vue
+++ b/src/views/inputtext/InputTextDoc.vue
@@ -20,6 +20,21 @@ import InputText from 'primevue/inputtext';
 	&lt;InputText id="username" type="text" v-model="value" /&gt;
 	&lt;label for="username"&gt;Username&lt;/label&gt;
 &lt;/span&gt;
+</CodeHighlight>
+
+                <h3>Icons</h3>
+                <p>An icon can be integrated within an input field by wrapping the input and the icon with an element having either <i>p-input-icon-right</i>
+                or <i>p-input-icon-left</i> class depending on the icon location.</p>
+<CodeHighlight>
+&lt;span class="p-input-icon-left"&gt;
+    &lt;i class="pi pi-search" /&gt;
+    &lt;InputText type="text" v-model="value1" placeholder="Search" /&gt;
+&lt;/span&gt;
+
+&lt;span class="p-input-icon-right"&gt;
+    &lt;i class="pi pi-spin pi-spinner" /&gt;
+    &lt;InputText type="text" v-model="value2" /&gt;
+&lt;/span&gt;
 </CodeHighlight>
 
 				<h3>Properties</h3>
@@ -57,7 +72,7 @@ import InputText from 'primevue/inputtext';
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;h3&gt;Basic&lt;/h3&gt;
+&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
 &lt;InputText type="text" v-model="value1" /&gt;
 &lt;span :style="{marginLeft: '.5em'}"&gt;{{value1}}&lt;/span&gt;
 
@@ -67,10 +82,22 @@ import InputText from 'primevue/inputtext';
     &lt;label for="username"&gt;Username&lt;/label&gt;
 &lt;/span&gt;
 
-&lt;h3&gt;Disabled&lt;/h3&gt;
-&lt;InputText type="text" v-model="value3" disabled /&gt;
+&lt;h3&gt;Left Icon&lt;/h3&gt;
+&lt;span class="p-input-icon-left"&gt;
+    &lt;i class="pi pi-search" /&gt;
+    &lt;InputText type="text" v-model="value3" placeholder="Search" /&gt;
+&lt;/span&gt;
 
-&lt;h3&gt;Invalid&lt;/h3&gt;
+&lt;h3&gt;Right Icon&lt;/h3&gt;
+&lt;span class="p-input-icon-right"&gt;
+    &lt;i class="pi pi-spin pi-spinner" /&gt;
+    &lt;InputText type="text" v-model="value4" /&gt;
+&lt;/span&gt;
+
+&lt;h3&gt;Disabled&lt;/h3&gt;
+&lt;InputText type="text" v-model="value5" disabled /&gt;
+
+    &lt;h3&gt;Invalid&lt;/h3&gt;
 &lt;InputText type="text" class="p-error" /&gt;
 
 &lt;h3&gt;Sizes&lt;/h3&gt;
@@ -86,9 +113,11 @@ import InputText from 'primevue/inputtext';
 export default {
 	data() {
 		return {
-			value1: '',
-			value2: '',
-			value3: 'PrimeVue'
+            value1: '',
+            value2: '',
+            value3: '',
+            value4: '',
+            value5: 'PrimeVue'
 		}
 	}
 }