diff --git a/components/lib/calendar/style/CalendarStyle.js b/components/lib/calendar/style/CalendarStyle.js
index 6257f35ff..23ead42ef 100644
--- a/components/lib/calendar/style/CalendarStyle.js
+++ b/components/lib/calendar/style/CalendarStyle.js
@@ -9,7 +9,7 @@ const classes = {
         'p-calendar p-component p-inputwrapper',
         {
             'p-calendar-w-btn': props.showIcon && props.iconDisplay === 'button',
-            'p-input-icon-right': props.showIcon && props.iconDisplay === 'input',
+            'p-icon-field p-icon-field-right': props.showIcon && props.iconDisplay === 'input',
             'p-calendar-timeonly': props.timeOnly,
             'p-calendar-disabled': props.disabled,
             'p-invalid': props.invalid,
@@ -25,7 +25,7 @@ const classes = {
         }
     ],
     dropdownButton: 'p-datepicker-trigger',
-    inputIcon: 'p-datepicker-trigger-icon',
+    inputIcon: 'p-datepicker-trigger-icon p-input-icon',
     panel: ({ instance, props, state }) => [
         'p-datepicker p-component',
         {
diff --git a/components/lib/password/Password.vue b/components/lib/password/Password.vue
index 75ee3e7c0..a2ec8725d 100755
--- a/components/lib/password/Password.vue
+++ b/components/lib/password/Password.vue
@@ -27,10 +27,10 @@
             :unstyled="unstyled"
         />
         <slot v-if="toggleMask && unmasked" name="hideicon" :onClick="onMaskToggle" :toggleCallback="onMaskToggle">
-            <component :is="hideIcon ? 'i' : 'EyeSlashIcon'" :class="hideIcon" @click="onMaskToggle" v-bind="ptm('hideIcon')" />
+            <component :is="hideIcon ? 'i' : 'EyeSlashIcon'" :class="[cx('hideIcon'), hideIcon]" @click="onMaskToggle" v-bind="ptm('hideIcon')" />
         </slot>
         <slot v-if="toggleMask && !unmasked" name="showicon" :onClick="onMaskToggle" :toggleCallback="onMaskToggle">
-            <component :is="showIcon ? 'i' : 'EyeIcon'" :class="showIcon" @click="onMaskToggle" v-bind="ptm('showIcon')" />
+            <component :is="showIcon ? 'i' : 'EyeIcon'" :class="[cx('showIcon'), showIcon]" @click="onMaskToggle" v-bind="ptm('showIcon')" />
         </slot>
         <span class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenAccesible')" :data-p-hidden-accessible="true">
             {{ infoText }}
diff --git a/components/lib/password/style/PasswordStyle.js b/components/lib/password/style/PasswordStyle.js
index e492d66c6..56ac0d6ea 100644
--- a/components/lib/password/style/PasswordStyle.js
+++ b/components/lib/password/style/PasswordStyle.js
@@ -10,7 +10,7 @@ const classes = {
         {
             'p-inputwrapper-filled': instance.filled,
             'p-inputwrapper-focus': instance.focused,
-            'p-input-icon-right': props.toggleMask
+            'p-icon-field p-icon-field-right': props.toggleMask
         }
     ],
     input: ({ props }) => [
@@ -19,7 +19,9 @@ const classes = {
             'p-disabled': props.disabled
         }
     ],
-    panel: ({ props, instance }) => [
+    hideIcon: 'p-input-icon',
+    showIcon: 'p-input-icon',
+    panel: ({ instance }) => [
         'p-password-panel p-component',
         {
             'p-ripple-disabled': instance.$primevue.config.ripple === false