diff --git a/doc/splitbutton/BasicDoc.vue b/doc/splitbutton/BasicDoc.vue
index a194231ba..5e138e593 100644
--- a/doc/splitbutton/BasicDoc.vue
+++ b/doc/splitbutton/BasicDoc.vue
@@ -3,7 +3,7 @@
         <p>SplitButton has a default command button and a collection of additional options defined by the <i>model</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />
+        <SplitButton label="Save" @click="save" :model="items" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,36 +15,33 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
                     label: 'Vue Website',
-                    icon: 'pi pi-external-link',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
                 },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                { label: 'Upload', to: '/fileupload' }
             ],
             code: {
                 basic: `
-<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />
+<SplitButton label="Save" @click="save" :model="items" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
         <Toast />
-        <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />
+        <SplitButton label="Save" @click="save" :model="items" />
     </div>
 </template>
 
@@ -55,26 +52,23 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
                     label: 'Vue Website',
-                    icon: 'pi pi-external-link',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
                 },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                { label: 'Upload', to: '/fileupload' }
             ]
         };
     },
@@ -90,7 +84,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <Toast />
-        <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />
+        <SplitButton label="Save" @click="save" :model="items" />
     </div>
 </template>
 
@@ -101,26 +95,23 @@ const toast = useToast();
 const items = [
     {
         label: 'Update',
-        icon: 'pi pi-refresh',
         command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
         }
     },
     {
         label: 'Delete',
-        icon: 'pi pi-times',
         command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
         label: 'Vue Website',
-        icon: 'pi pi-external-link',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
     },
-    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+    { label: 'Upload', to: '/fileupload' }
 ];
 
 const save = () => {
diff --git a/doc/splitbutton/DisabledDoc.vue b/doc/splitbutton/DisabledDoc.vue
index c276d0386..5e52a6843 100644
--- a/doc/splitbutton/DisabledDoc.vue
+++ b/doc/splitbutton/DisabledDoc.vue
@@ -3,7 +3,7 @@
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />
+        <SplitButton label="Save" @click="save" :model="items" disabled />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,36 +15,33 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
                     label: 'Vue Website',
-                    icon: 'pi pi-external-link',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
                 },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                { label: 'Upload', to: '/fileupload' }
             ],
             code: {
                 basic: `
-<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />
+<SplitButton label="Save" @click="save" :model="items" disabled />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
         <Toast />
-        <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />
+        <SplitButton label="Save" @click="save" :model="items" disabled />
     </div>
 </template>
 
@@ -55,26 +52,23 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
                     label: 'Vue Website',
-                    icon: 'pi pi-external-link',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
                 },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                { label: 'Upload', to: '/fileupload' }
             ]
         };
     },
@@ -89,7 +83,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <Toast />
-        <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />
+        <SplitButton label="Save" @click="save" :model="items" disabled />
     </div>
 </template>
 
@@ -100,26 +94,23 @@ const toast = useToast();
 const items = [
     {
         label: 'Update',
-        icon: 'pi pi-refresh',
         command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
         }
     },
     {
         label: 'Delete',
-        icon: 'pi pi-times',
         command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
         label: 'Vue Website',
-        icon: 'pi pi-external-link',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
     },
-    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+    { label: 'Upload', to: '/fileupload' }
 ];
 
 const save = () => {
diff --git a/doc/splitbutton/IconsDoc.vue b/doc/splitbutton/IconsDoc.vue
new file mode 100644
index 000000000..d6bc5707e
--- /dev/null
+++ b/doc/splitbutton/IconsDoc.vue
@@ -0,0 +1,140 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The buttons and menuitems have support to display icons.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <SplitButton label="Save" icon="pi pi-check" menuButtonIcon="pi pi-cog" @click="save" :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                },
+                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+            ],
+            code: {
+                basic: `
+<SplitButton label="Save" icon="pi pi-check" menuButtonIcon="pi pi-cog" @click="save" :model="items" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Toast />
+        <SplitButton label="Save" icon="pi pi-check" menuButtonIcon="pi pi-cog" @click="save" :model="items" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                },
+                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+            ]
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Toast />
+        <SplitButton label="Save" icon="pi pi-check" menuButtonIcon="pi pi-cog" @click="save" :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const items = [
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-times',
+        command: () => {
+            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        label: 'Vue Website',
+        icon: 'pi pi-external-link',
+        command: () => {
+            window.location.href = 'https://vuejs.org/';
+        }
+    },
+    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+];
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/doc/splitbutton/OutlinedDoc.vue b/doc/splitbutton/OutlinedDoc.vue
index d3fb87729..836440cee 100644
--- a/doc/splitbutton/OutlinedDoc.vue
+++ b/doc/splitbutton/OutlinedDoc.vue
@@ -3,14 +3,14 @@
         <p>Outlined buttons display a border without a background initially.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="contrast"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,50 +22,47 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
                     label: 'Vue Website',
-                    icon: 'pi pi-external-link',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
                 },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                { label: 'Upload', to: '/fileupload' }
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="contrast"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" outlined severity="warning"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="contrast"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
     </div>
 </template>
 
@@ -76,26 +73,23 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
                     label: 'Vue Website',
-                    icon: 'pi pi-external-link',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
                 },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                { label: 'Upload', to: '/fileupload' }
             ]
         }
     },
@@ -111,14 +105,14 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="contrast"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
     </div>
 </template>
 
@@ -129,26 +123,23 @@ const toast = useToast();
 const items = [
     {
         label: 'Update',
-        icon: 'pi pi-refresh',
         command: () => {
             toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
         }
     },
     {
         label: 'Delete',
-        icon: 'pi pi-times',
         command: () => {
             toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
         label: 'Vue Website',
-        icon: 'pi pi-external-link',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
     },
-    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+    { label: 'Upload', to: '/fileupload' }
 ];
 
 const save = () => {
diff --git a/doc/splitbutton/RaisedDoc.vue b/doc/splitbutton/RaisedDoc.vue
index c52148266..a617780de 100644
--- a/doc/splitbutton/RaisedDoc.vue
+++ b/doc/splitbutton/RaisedDoc.vue
@@ -3,14 +3,14 @@
         <p>Raised buttons display a shadow to indicate elevation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="contrast"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,50 +22,47 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
                     label: 'Vue Website',
-                    icon: 'pi pi-external-link',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
                 },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                { label: 'Upload', to: '/fileupload' }
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="contrast"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised severity="warning"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="contrast"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
     </div>
 </template>
 
@@ -76,26 +73,23 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
                     label: 'Vue Website',
-                    icon: 'pi pi-external-link',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
                 },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                { label: 'Upload', to: '/fileupload' }
             ]
         };
     },
@@ -111,14 +105,14 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="contrast"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
     </div>
 </template>
 
@@ -129,26 +123,23 @@ const toast = useToast();
 const items = [
     {
         label: 'Update',
-        icon: 'pi pi-refresh',
         command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
         }
     },
     {
         label: 'Delete',
-        icon: 'pi pi-times',
         command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
         label: 'Vue Website',
-        icon: 'pi pi-external-link',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
     },
-    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+    { label: 'Upload', to: '/fileupload' }
 ];
 
 const save = () => {
diff --git a/doc/splitbutton/RaisedTextDoc.vue b/doc/splitbutton/RaisedTextDoc.vue
index 509af7e8e..3f26896b3 100644
--- a/doc/splitbutton/RaisedTextDoc.vue
+++ b/doc/splitbutton/RaisedTextDoc.vue
@@ -3,13 +3,13 @@
         <p>Text buttons can be displayed as raised as well for elevation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -21,48 +21,45 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
                     label: 'Vue Website',
-                    icon: 'pi pi-external-link',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
                 },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                { label: 'Upload', to: '/fileupload' }
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised text severity="warning"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
     </div>
 </template>
 
@@ -73,26 +70,23 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
                     label: 'Vue Website',
-                    icon: 'pi pi-external-link',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
                 },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                { label: 'Upload', to: '/fileupload' }
             ]
         };
     },
@@ -108,13 +102,13 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
     </div>
 </template>
 
@@ -125,26 +119,23 @@ const toast = useToast();
 const items = [
     {
         label: 'Update',
-        icon: 'pi pi-refresh',
         command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
         }
     },
     {
         label: 'Delete',
-        icon: 'pi pi-times',
         command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
         label: 'Vue Website',
-        icon: 'pi pi-external-link',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
     },
-    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+    { label: 'Upload', to: '/fileupload' }
 ];
 
 const save = () => {
diff --git a/doc/splitbutton/RoundedDoc.vue b/doc/splitbutton/RoundedDoc.vue
index aca17a104..eaa21c27a 100644
--- a/doc/splitbutton/RoundedDoc.vue
+++ b/doc/splitbutton/RoundedDoc.vue
@@ -3,14 +3,14 @@
         <p>Rounded buttons have a circular border radius.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="contrast"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,50 +22,47 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
                     label: 'Vue Website',
-                    icon: 'pi pi-external-link',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
                 },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                { label: 'Upload', to: '/fileupload' }
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="contrast"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" rounded severity="warning"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="contrast"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
     </div>
 </template>
 
@@ -76,26 +73,23 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
                     label: 'Vue Website',
-                    icon: 'pi pi-external-link',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
                 },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                { label: 'Upload', to: '/fileupload' }
             ]
         };
     },
@@ -111,14 +105,14 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="contrast"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
     </div>
 </template>
 
@@ -129,26 +123,23 @@ const toast = useToast();
 const items = [
     {
         label: 'Update',
-        icon: 'pi pi-refresh',
         command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
         }
     },
     {
         label: 'Delete',
-        icon: 'pi pi-times',
         command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
         label: 'Vue Website',
-        icon: 'pi pi-external-link',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
     },
-    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+    { label: 'Upload', to: '/fileupload' }
 ];
 
 const save = () => {
diff --git a/doc/splitbutton/SeverityDoc.vue b/doc/splitbutton/SeverityDoc.vue
index 215972bee..a8b249776 100644
--- a/doc/splitbutton/SeverityDoc.vue
+++ b/doc/splitbutton/SeverityDoc.vue
@@ -3,14 +3,14 @@
         <p>The <i>severity</i> property defines the variant of a button.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="contrast"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,50 +22,47 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
                     label: 'Vue Website',
-                    icon: 'pi pi-external-link',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
                 },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                { label: 'Upload', to: '/fileupload' }
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="contrast"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" severity="warning"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="contrast"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
     </div>
 </template>
 
@@ -76,26 +73,23 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
                     label: 'Vue Website',
-                    icon: 'pi pi-external-link',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
                 },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                { label: 'Upload', to: '/fileupload' }
             ]
         };
     },
@@ -111,14 +105,14 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="contrast"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
     </div>
 </template>
 
@@ -129,26 +123,23 @@ const toast = useToast();
 const items = [
     {
         label: 'Update',
-        icon: 'pi pi-refresh',
         command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
         }
     },
     {
         label: 'Delete',
-        icon: 'pi pi-times',
         command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
         label: 'Vue Website',
-        icon: 'pi pi-external-link',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
     },
-    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+    { label: 'Upload', to: '/fileupload' }
 ];
 
 const save = () => {
diff --git a/doc/splitbutton/TemplateDoc.vue b/doc/splitbutton/TemplateDoc.vue
index d727c9c2f..48f83e229 100644
--- a/doc/splitbutton/TemplateDoc.vue
+++ b/doc/splitbutton/TemplateDoc.vue
@@ -3,9 +3,11 @@
         <p>Custom content inside a button is defined as children.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round" @click="save">
-            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 3rem" class="px-3" />
-            <span class="mr-2 flex align-items-center font-bold">PrimeVue</span>
+        <SplitButton :model="items" @click="save" severity="contrast">
+            <span class="flex align-items-center font-bold">
+                <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
+                <span>PrimeVue</span>
+            </span>
         </SplitButton>
     </div>
     <DocSectionCode :code="code" />
@@ -41,18 +43,22 @@ export default {
             ],
             code: {
                 basic: `
-<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round" @click="save">
-    <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 3rem" class="px-3" />
-    <span class="mr-2 flex align-items-center font-bold">PrimeVue</span>
+<SplitButton :model="items" @click="save" severity="contrast">
+    <span class="flex align-items-center font-bold">
+        <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
+        <span>PrimeVue</span>
+    </span>
 </SplitButton>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
         <Toast />
-        <SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round" @click="save">
-            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 3rem" class="px-3" />
-            <span class="mr-2 flex align-items-center font-bold">PrimeVue</span>
+        <SplitButton :model="items" @click="save" severity="contrast">
+            <span class="flex align-items-center font-bold">
+                <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
+                <span>PrimeVue</span>
+            </span>
         </SplitButton>
     </div>
 </template>
@@ -99,9 +105,11 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <Toast />
-        <SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round" @click="save">
-            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 3rem" class="px-3" />
-            <span class="mr-2 flex align-items-center font-bold">PrimeVue</span>
+        <SplitButton :model="items" @click="save" severity="contrast">
+            <span class="flex align-items-center font-bold">
+                <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
+                <span>PrimeVue</span>
+            </span>
         </SplitButton>
     </div>
 </template>
diff --git a/doc/splitbutton/TextDoc.vue b/doc/splitbutton/TextDoc.vue
index 18ed80e8d..b2992a0e3 100644
--- a/doc/splitbutton/TextDoc.vue
+++ b/doc/splitbutton/TextDoc.vue
@@ -3,13 +3,13 @@
         <p>Text buttons are displayed as textual elements.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -21,48 +21,45 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
                     label: 'Vue Website',
-                    icon: 'pi pi-external-link',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
                 },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                { label: 'Upload', to: '/fileupload' }
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" text></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" text severity="warning"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
     </div>
 </template>
 
@@ -73,26 +70,23 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
                     label: 'Vue Website',
-                    icon: 'pi pi-external-link',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
                 },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                { label: 'Upload', to: '/fileupload' }
             ]
         };
     },
@@ -108,13 +102,13 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
     </div>
 </template>
 
@@ -125,26 +119,23 @@ const toast = useToast();
 const items = [
     {
         label: 'Update',
-        icon: 'pi pi-refresh',
         command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
         }
     },
     {
         label: 'Delete',
-        icon: 'pi pi-times',
         command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
         label: 'Vue Website',
-        icon: 'pi pi-external-link',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
     },
-    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+    { label: 'Upload', to: '/fileupload' }
 ];
 
 const save = () => {
diff --git a/pages/splitbutton/index.vue b/pages/splitbutton/index.vue
index 6d7bfa2e9..4e337ca82 100755
--- a/pages/splitbutton/index.vue
+++ b/pages/splitbutton/index.vue
@@ -14,6 +14,7 @@
 import AccessibilityDoc from '@/doc/splitbutton/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/splitbutton/BasicDoc.vue';
 import DisabledDoc from '@/doc/splitbutton/DisabledDoc.vue';
+import IconsDoc from '@/doc/splitbutton/IconsDoc.vue';
 import ImportDoc from '@/doc/splitbutton/ImportDoc.vue';
 import OutlinedDoc from '@/doc/splitbutton/OutlinedDoc.vue';
 import RaisedDoc from '@/doc/splitbutton/RaisedDoc.vue';
@@ -40,6 +41,11 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
+                {
+                    id: 'icons',
+                    label: 'Icons',
+                    component: IconsDoc
+                },
                 {
                     id: 'severity',
                     label: 'Severity',