From fbc7d15f5b6b29cd14be26c2778d1f746033e902 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 10 Jul 2020 15:10:53 +0300
Subject: [PATCH] Fixed #379 - Support for left and right icons for Input

---
 public/themes/arya-blue/theme.css               |  6 +++---
 public/themes/arya-green/theme.css              |  6 +++---
 public/themes/arya-orange/theme.css             |  6 +++---
 public/themes/arya-purple/theme.css             |  6 +++---
 public/themes/bootstrap4-dark-blue/theme.css    |  6 +++---
 public/themes/bootstrap4-dark-purple/theme.css  |  6 +++---
 public/themes/bootstrap4-light-blue/theme.css   |  6 +++---
 public/themes/bootstrap4-light-purple/theme.css |  6 +++---
 public/themes/luna-amber/theme.css              |  6 +++---
 public/themes/luna-blue/theme.css               |  6 +++---
 public/themes/luna-green/theme.css              |  6 +++---
 public/themes/luna-pink/theme.css               |  6 +++---
 public/themes/md-dark-deeppurple/theme.css      |  6 +++---
 public/themes/md-dark-indigo/theme.css          |  6 +++---
 public/themes/md-light-deeppurple/theme.css     |  6 +++---
 public/themes/md-light-indigo/theme.css         |  6 +++---
 public/themes/mdc-dark-deeppurple/theme.css     |  6 +++---
 public/themes/mdc-dark-indigo/theme.css         |  6 +++---
 public/themes/mdc-light-deeppurple/theme.css    |  6 +++---
 public/themes/mdc-light-indigo/theme.css        |  6 +++---
 public/themes/nova-accent/theme.css             |  6 +++---
 public/themes/nova-alt/theme.css                |  6 +++---
 public/themes/nova-vue/theme.css                |  6 +++---
 public/themes/nova/theme.css                    |  6 +++---
 public/themes/rhea/theme.css                    |  6 +++---
 public/themes/saga-blue/theme.css               |  6 +++---
 public/themes/saga-green/theme.css              |  6 +++---
 public/themes/saga-orange/theme.css             |  6 +++---
 public/themes/saga-purple/theme.css             |  6 +++---
 public/themes/vela-blue/theme.css               |  6 +++---
 public/themes/vela-green/theme.css              |  6 +++---
 public/themes/vela-orange/theme.css             |  6 +++---
 public/themes/vela-purple/theme.css             |  6 +++---
 src/views/inputtext/InputTextDoc.vue            | 12 +++++++++---
 34 files changed, 108 insertions(+), 102 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 23c59eba1..ad5d8f039 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -769,13 +769,13 @@
   padding: 0.625rem 0.625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
@@ -784,7 +784,7 @@
   padding-left: 2rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 242669f8d..c220b1d02 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -769,13 +769,13 @@
   padding: 0.625rem 0.625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
@@ -784,7 +784,7 @@
   padding-left: 2rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 4e50bf249..27f73c995 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -769,13 +769,13 @@
   padding: 0.625rem 0.625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
@@ -784,7 +784,7 @@
   padding-left: 2rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index b1e1ad268..2749c6aa2 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -769,13 +769,13 @@
   padding: 0.625rem 0.625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
@@ -784,7 +784,7 @@
   padding-left: 2rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 4ddcbd5c6..4ab747141 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -769,13 +769,13 @@
   padding: 0.625rem 0.9375rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
   transition-duration: 0.15s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
 }
@@ -784,7 +784,7 @@
   padding-left: 2.5rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
 }
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index f4df67bbf..a491d9ab0 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -769,13 +769,13 @@
   padding: 0.625rem 0.9375rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
   transition-duration: 0.15s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
 }
@@ -784,7 +784,7 @@
   padding-left: 2.5rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
 }
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 48a956a12..9c58a21d8 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -769,13 +769,13 @@
   padding: 0.625rem 0.9375rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.75rem;
   color: #6c757d;
   transition-duration: 0.15s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: #495057;
 }
@@ -784,7 +784,7 @@
   padding-left: 2.5rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: #495057;
 }
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index f99b8dfda..0a02651f4 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -769,13 +769,13 @@
   padding: 0.625rem 0.9375rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.75rem;
   color: #6c757d;
   transition-duration: 0.15s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: #495057;
 }
@@ -784,7 +784,7 @@
   padding-left: 2.5rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: #495057;
 }
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index f0e1d3dfe..223542bdd 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -769,13 +769,13 @@
   padding: 0.53625rem 0.53625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.429rem;
   color: #9b9b9b;
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #888888;
 }
@@ -784,7 +784,7 @@
   padding-left: 1.858rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #888888;
 }
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 95c94c0d4..7cb3f4ef7 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -769,13 +769,13 @@
   padding: 0.53625rem 0.53625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.429rem;
   color: #9b9b9b;
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #888888;
 }
@@ -784,7 +784,7 @@
   padding-left: 1.858rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #888888;
 }
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index c9942309a..704d56a7f 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -769,13 +769,13 @@
   padding: 0.53625rem 0.53625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.429rem;
   color: #9b9b9b;
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #888888;
 }
@@ -784,7 +784,7 @@
   padding-left: 1.858rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #888888;
 }
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 8aecdc35f..81412b4d5 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -769,13 +769,13 @@
   padding: 0.53625rem 0.53625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.429rem;
   color: #9b9b9b;
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #888888;
 }
@@ -784,7 +784,7 @@
   padding-left: 1.858rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #888888;
 }
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 7030ebe30..154af2798 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -789,13 +789,13 @@
   padding: 1.25rem 1.25rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 1rem;
   color: rgba(255, 255, 255, 0.6);
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 1rem;
   color: rgba(255, 255, 255, 0.6);
 }
@@ -804,7 +804,7 @@
   padding-left: 3rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 1rem;
   color: rgba(255, 255, 255, 0.6);
 }
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index e9b9c8981..a2825834b 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -789,13 +789,13 @@
   padding: 1.25rem 1.25rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 1rem;
   color: rgba(255, 255, 255, 0.6);
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 1rem;
   color: rgba(255, 255, 255, 0.6);
 }
@@ -804,7 +804,7 @@
   padding-left: 3rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 1rem;
   color: rgba(255, 255, 255, 0.6);
 }
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 3b23c6bee..fba416cfd 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -789,13 +789,13 @@
   padding: 1.25rem 1.25rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 1rem;
   color: rgba(0, 0, 0, 0.6);
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 1rem;
   color: rgba(0, 0, 0, 0.6);
 }
@@ -804,7 +804,7 @@
   padding-left: 3rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 1rem;
   color: rgba(0, 0, 0, 0.6);
 }
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 1e742a442..790548923 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -789,13 +789,13 @@
   padding: 1.25rem 1.25rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 1rem;
   color: rgba(0, 0, 0, 0.6);
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 1rem;
   color: rgba(0, 0, 0, 0.6);
 }
@@ -804,7 +804,7 @@
   padding-left: 3rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 1rem;
   color: rgba(0, 0, 0, 0.6);
 }
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 910551782..7470c3d61 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -789,13 +789,13 @@
   padding: 0.9375rem 0.9375rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
 }
@@ -804,7 +804,7 @@
   padding-left: 2.5rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
 }
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 94930df94..6a05aa2f4 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -789,13 +789,13 @@
   padding: 0.9375rem 0.9375rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
 }
@@ -804,7 +804,7 @@
   padding-left: 2.5rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
 }
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index f5758571c..ffc27a618 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -789,13 +789,13 @@
   padding: 0.9375rem 0.9375rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.75rem;
   color: rgba(0, 0, 0, 0.6);
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(0, 0, 0, 0.6);
 }
@@ -804,7 +804,7 @@
   padding-left: 2.5rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(0, 0, 0, 0.6);
 }
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 64cdf5d26..d91923199 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -789,13 +789,13 @@
   padding: 0.9375rem 0.9375rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.75rem;
   color: rgba(0, 0, 0, 0.6);
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(0, 0, 0, 0.6);
 }
@@ -804,7 +804,7 @@
   padding-left: 2.5rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(0, 0, 0, 0.6);
 }
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 203cc33cd..a164e35e3 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -765,13 +765,13 @@
   padding: 0.53625rem 0.53625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.429rem;
   color: #666666;
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #848484;
 }
@@ -780,7 +780,7 @@
   padding-left: 1.858rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #848484;
 }
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 93d26b47e..04a4e0cc1 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -769,13 +769,13 @@
   padding: 0.53625rem 0.53625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.429rem;
   color: #666666;
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #848484;
 }
@@ -784,7 +784,7 @@
   padding-left: 1.858rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #848484;
 }
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 7d6f332db..583f3a9fa 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -769,13 +769,13 @@
   padding: 0.53625rem 0.53625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.429rem;
   color: #666666;
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #848484;
 }
@@ -784,7 +784,7 @@
   padding-left: 1.858rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #848484;
 }
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index f3485cd64..67f52a705 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -769,13 +769,13 @@
   padding: 0.53625rem 0.53625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.429rem;
   color: #666666;
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #848484;
 }
@@ -784,7 +784,7 @@
   padding-left: 1.858rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #848484;
 }
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index cd18383ad..aeb88fdfb 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -765,13 +765,13 @@
   padding: 0.53625rem 0.53625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.429rem;
   color: #a6a6a6;
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #a6a6a6;
 }
@@ -780,7 +780,7 @@
   padding-left: 1.858rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #a6a6a6;
 }
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 4bb3ec592..7404ca879 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -769,13 +769,13 @@
   padding: 0.625rem 0.625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.5rem;
   color: #6c757d;
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: #6c757d;
 }
@@ -784,7 +784,7 @@
   padding-left: 2rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: #6c757d;
 }
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index ddd2fc9c8..b4d844483 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -769,13 +769,13 @@
   padding: 0.625rem 0.625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.5rem;
   color: #6c757d;
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: #6c757d;
 }
@@ -784,7 +784,7 @@
   padding-left: 2rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: #6c757d;
 }
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 94187246f..54e773452 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -769,13 +769,13 @@
   padding: 0.625rem 0.625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.5rem;
   color: #6c757d;
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: #6c757d;
 }
@@ -784,7 +784,7 @@
   padding-left: 2rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: #6c757d;
 }
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index bc7b4f772..e164392cc 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -769,13 +769,13 @@
   padding: 0.625rem 0.625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.5rem;
   color: #6c757d;
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: #6c757d;
 }
@@ -784,7 +784,7 @@
   padding-left: 2rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: #6c757d;
 }
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index bab98bc85..7898c8d24 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -769,13 +769,13 @@
   padding: 0.625rem 0.625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
@@ -784,7 +784,7 @@
   padding-left: 2rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 472b08000..74651a434 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -769,13 +769,13 @@
   padding: 0.625rem 0.625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
@@ -784,7 +784,7 @@
   padding-left: 2rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 6a99a374f..cd2f783ff 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -769,13 +769,13 @@
   padding: 0.625rem 0.625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
@@ -784,7 +784,7 @@
   padding-left: 2rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 810afb7a7..decfb51b4 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -769,13 +769,13 @@
   padding: 0.625rem 0.625rem;
 }
 
-.p-float-label label {
+.p-float-label > label {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
   transition-duration: 0.2s;
 }
 
-.p-input-icon-left > i {
+.p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
@@ -784,7 +784,7 @@
   padding-left: 2rem;
 }
 
-.p-input-icon-right > i {
+.p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
diff --git a/src/views/inputtext/InputTextDoc.vue b/src/views/inputtext/InputTextDoc.vue
index e07ba121e..398e21569 100755
--- a/src/views/inputtext/InputTextDoc.vue
+++ b/src/views/inputtext/InputTextDoc.vue
@@ -23,8 +23,8 @@ import InputText from 'primevue/inputtext';
 </CodeHighlight>
 
                 <h5>Icons</h5>
-                <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>
+                <p>An icon can be integrated within an input field by wrapping the input and the icon with an element having <i>p-input-icon-right</i>
+                and <i>p-input-icon-left</i> classes depending on the icon location.</p>
 <CodeHighlight>
 &lt;span class="p-input-icon-left"&gt;
     &lt;i class="pi pi-search" /&gt;
@@ -32,8 +32,14 @@ import InputText from 'primevue/inputtext';
 &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;i class="pi pi-spin pi-spinner" /&gt;
+&lt;/span&gt;
+
+&lt;span class="p-input-icon-left p-input-icon-right"&gt;
+    &lt;i class="pi pi-search" /&gt;
+    &lt;InputText type="text" v-model="value3" /&gt;
+    &lt;i class="pi pi-spin pi-spinner" /&gt;
 &lt;/span&gt;
 </CodeHighlight>