diff --git a/components/lib/calendar/BaseCalendar.vue b/components/lib/calendar/BaseCalendar.vue
index 17354f390..910fcfd04 100644
--- a/components/lib/calendar/BaseCalendar.vue
+++ b/components/lib/calendar/BaseCalendar.vue
@@ -169,7 +169,6 @@ const classes = {
     dropdownButton: 'p-datepicker-trigger',
     panel: ({ instance, props, state }) => [
         'p-datepicker p-component',
-        props.panelClass,
         {
             'p-datepicker-inline': props.inline,
             'p-disabled': props.disabled,
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index 2d6624dd7..e261c13e8 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -53,7 +53,7 @@
                     v-if="inline || overlayVisible"
                     :ref="overlayRef"
                     :id="panelId"
-                    :class="cx('panel')"
+                    :class="[cx('panel'), panelClass]"
                     :style="panelStyle"
                     :role="inline ? null : 'dialog'"
                     :aria-modal="inline ? null : 'true'"
diff --git a/components/lib/message/BaseMessage.vue b/components/lib/message/BaseMessage.vue
index 797f4584e..75ef557b3 100644
--- a/components/lib/message/BaseMessage.vue
+++ b/components/lib/message/BaseMessage.vue
@@ -51,10 +51,10 @@ const styles = `
 const classes = {
     root: ({ props }) => 'p-message p-component p-message-' + props.severity,
     wrapper: 'p-message-wrapper',
-    icon: ({ props }) => ['p-message-icon', props.icon],
+    icon: 'p-message-icon',
     text: 'p-message-text',
     button: 'p-message-close p-link',
-    buttonIcon: ({ props }) => ['p-message-close-icon', props.closeIcon]
+    buttonIcon: 'p-message-close-icon'
 };
 
 const { load: loadStyle } = useStyle(styles, { name: 'message', manual: true });
diff --git a/components/lib/message/Message.vue b/components/lib/message/Message.vue
index 679d6273d..afed7cb26 100755
--- a/components/lib/message/Message.vue
+++ b/components/lib/message/Message.vue
@@ -3,15 +3,15 @@
         <div v-show="visible" :class="cx('root')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('root')" data-pc-name="message">
             <div :class="cx('wrapper')" v-bind="ptm('wrapper')">
                 <slot name="messageicon" class="p-message-icon">
-                    <component :is="icon ? 'span' : iconComponent" :class="cx('icon')" v-bind="ptm('icon')"></component>
+                    <component :is="icon ? 'span' : iconComponent" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></component>
                 </slot>
                 <div class="p-message-text" :class="cx('text')" v-bind="ptm('text')">
                     <slot></slot>
                 </div>
                 <button v-if="closable" v-ripple :class="cx('button')" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="{ ...closeButtonProps, ...ptm('button') }">
                     <slot name="closeicon">
-                        <i v-if="closeIcon" :class="cx('buttonIcon')" v-bind="ptm('buttonIcon')" />
-                        <TimesIcon v-else :class="cx('buttonIcon')" v-bind="ptm('buttonIcon')" />
+                        <i v-if="closeIcon" :class="[cx('buttonIcon'), closeIcon]" v-bind="ptm('buttonIcon')" />
+                        <TimesIcon v-else :class="[cx('buttonIcon'), closeIcon]" v-bind="ptm('buttonIcon')" />
                     </slot>
                 </button>
             </div>
diff --git a/components/lib/speeddial/BaseSpeedDial.vue b/components/lib/speeddial/BaseSpeedDial.vue
index 1dade5846..6b7f34525 100644
--- a/components/lib/speeddial/BaseSpeedDial.vue
+++ b/components/lib/speeddial/BaseSpeedDial.vue
@@ -133,7 +133,6 @@ const classes = {
             'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
         }
     ],
-    buttonIcon: ({ instance, props }) => (instance.d_visible && !!props.hideIcon ? props.hideIcon : props.showIcon),
     menu: 'p-speeddial-list',
     menuitem: ({ instance, id }) => [
         'p-speeddial-item',
diff --git a/components/lib/speeddial/SpeedDial.vue b/components/lib/speeddial/SpeedDial.vue
index ee89f5051..f895ba05d 100644
--- a/components/lib/speeddial/SpeedDial.vue
+++ b/components/lib/speeddial/SpeedDial.vue
@@ -18,7 +18,7 @@
                 <template #icon>
                     <slot name="icon" :visible="d_visible">
                         <component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="cx('buttonIcon')" v-bind="ptm('button')['icon']" />
-                        <component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="cx('buttonIcon')" v-bind="ptm('button')['icon']" />
+                        <component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="d_visible && !!hideIcon ? hideIcon : showIcon" v-bind="ptm('button')['icon']" />
                     </slot>
                 </template>
             </SDButton>
diff --git a/components/lib/toast/BaseToast.vue b/components/lib/toast/BaseToast.vue
index f840f88ac..2ffcfbcac 100644
--- a/components/lib/toast/BaseToast.vue
+++ b/components/lib/toast/BaseToast.vue
@@ -108,7 +108,6 @@ const classes = {
     ],
     container: ({ props }) => [
         'p-toast-message',
-        props.message.styleClass,
         {
             'p-toast-message-info': props.message.severity === 'info' || props.message.severity === undefined,
             'p-toast-message-warn': props.message.severity === 'warn',
@@ -116,7 +115,7 @@ const classes = {
             'p-toast-message-success': props.message.severity === 'success'
         }
     ],
-    content: ({ props }) => `p-toast-message-content ${props.message.contentStyleClass || ''}`,
+    content: 'p-toast-message-content',
     icon: ({ props }) => [
         'p-toast-message-icon',
         {
@@ -130,7 +129,7 @@ const classes = {
     summary: 'p-toast-summary',
     detail: 'p-toast-detail',
     button: 'p-toast-icon-close p-link',
-    buttonIcon: ({ props }) => ['p-toast-icon-close-icon', props.closeIcon]
+    buttonIcon: 'p-toast-icon-close-icon'
 };
 
 const { load: loadStyle } = useStyle(styles, { name: 'toast', manual: true });
diff --git a/components/lib/toast/Toast.vue b/components/lib/toast/Toast.vue
index 705a6ef8f..c88fc59e9 100755
--- a/components/lib/toast/Toast.vue
+++ b/components/lib/toast/Toast.vue
@@ -35,7 +35,6 @@ export default {
     extends: BaseToast,
     inheritAttrs: false,
     emits: ['close', 'life-end'],
-
     data() {
         return {
             messages: []
diff --git a/components/lib/toast/ToastMessage.vue b/components/lib/toast/ToastMessage.vue
index eac7052fe..b7d1a8bc6 100755
--- a/components/lib/toast/ToastMessage.vue
+++ b/components/lib/toast/ToastMessage.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="cx('container')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('container')">
-        <div :class="cx('content')" v-bind="ptm('content')">
+        <div :class="[cx('content'), message.contentStyleClass]" v-bind="ptm('content')">
             <template v-if="!templates.message">
                 <component :is="templates.icon ? templates.icon : iconComponent && iconComponent.name ? iconComponent : 'span'" :class="cx('icon')" v-bind="ptm('icon')" />
                 <div :class="cx('text')" v-bind="ptm('text')">
@@ -11,7 +11,7 @@
             <component v-else :is="templates.message" :message="message"></component>
             <div v-if="message.closable !== false" v-bind="ptm('buttonContainer')">
                 <button v-ripple :class="cx('button')" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus v-bind="{ ...closeButtonProps, ...ptm('button') }">
-                    <component :is="templates.closeicon || 'TimesIcon'" :class="cx('buttonIcon')" v-bind="ptm('buttonIcon')" />
+                    <component :is="templates.closeicon || 'TimesIcon'" :class="[cx('buttonIcon'), closeIcon]" v-bind="ptm('buttonIcon')" />
                 </button>
             </div>
         </div>
diff --git a/components/lib/togglebutton/BaseToggleButton.vue b/components/lib/togglebutton/BaseToggleButton.vue
index 421325d3f..c306d41c5 100644
--- a/components/lib/togglebutton/BaseToggleButton.vue
+++ b/components/lib/togglebutton/BaseToggleButton.vue
@@ -12,7 +12,6 @@ const classes = {
         }
     ],
     icon: ({ instance, props }) => [
-        props.modelValue ? props.onIcon : props.offIcon,
         'p-button-icon',
         {
             'p-button-icon-left': props.iconPos === 'left' && instance.label,
diff --git a/components/lib/togglebutton/ToggleButton.vue b/components/lib/togglebutton/ToggleButton.vue
index 8e7c6ada0..499afbd31 100755
--- a/components/lib/togglebutton/ToggleButton.vue
+++ b/components/lib/togglebutton/ToggleButton.vue
@@ -17,7 +17,7 @@
             />
         </span>
         <slot name="icon" :value="modelValue" :class="cx('icon')">
-            <span v-if="onIcon || offIcon" :class="cx('icon')" v-bind="ptm('icon')" />
+            <span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="ptm('icon')" />
         </slot>
         <span :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
     </div>