diff --git a/api-generator/components/dock.js b/api-generator/components/dock.js
index 3920dba71..c8800bfb1 100644
--- a/api-generator/components/dock.js
+++ b/api-generator/components/dock.js
@@ -41,6 +41,10 @@ const DockSlots = [
     {
         name: "item",
         description: "Custom content for the item."
+    },
+    {
+        name: "icon",
+        description: "Custom content for the item."
     }
 ];
 
diff --git a/src/components/dock/Dock.d.ts b/src/components/dock/Dock.d.ts
index 9ea7619bd..cef2af843 100644
--- a/src/components/dock/Dock.d.ts
+++ b/src/components/dock/Dock.d.ts
@@ -13,6 +13,7 @@ declare class Dock {
     $props: DockProps;
     $slots: {
         'item': VNode[];
+        'icon': VNode[];
     }
 }
 
diff --git a/src/components/dock/Dock.vue b/src/components/dock/Dock.vue
index 29a96a110..1f41aa9b9 100644
--- a/src/components/dock/Dock.vue
+++ b/src/components/dock/Dock.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="containerClass" :style="style">
-        <DockSub :model="model" :template="$slots.item" :exact="exact" :tooltipOptions="tooltipOptions"></DockSub>
+        <DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions"></DockSub>
     </div>
 </template>
 
diff --git a/src/components/dock/DockSub.vue b/src/components/dock/DockSub.vue
index 458016d83..1a72683ed 100644
--- a/src/components/dock/DockSub.vue
+++ b/src/components/dock/DockSub.vue
@@ -2,25 +2,25 @@
     <div class="p-dock-list-container">
         <ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave">
             <li v-for="(item, index) of model" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
-                <template v-if="!template">
+                <template v-if="!templates['item']">
                     <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
                         <a :href="href" role="menuitem" :class="linkClass(item, {isActive, isExactActive})" :target="item.target"
                             v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item, navigate)">
-                            <template v-if="typeof item.icon === 'string'">
+                            <template v-if="!templates['icon']">
                                 <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
                             </template>
-                            <component v-else :is="item.icon"></component>
+                            <component v-else :is="templates['icon']" :item="item"></component>
                         </a>
                     </router-link>
                     <a v-else :href="item.url" role="menuitem" :class="linkClass(item)" :target="item.target"
                         v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'">
-                        <template v-if="typeof item.icon === 'string'">
+                        <template v-if="!templates['icon']">
                             <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
                         </template>
-                        <component v-else :is="item.icon"></component>
+                        <component v-else :is="templates['icon']" :item="item"></component>
                     </a>
                 </template>
-                <component v-else :is="template" :item="item"></component>
+                <component v-else :is="templates['item']" :item="item"></component>
             </li>
         </ul>
     </div>
@@ -36,8 +36,8 @@ export default {
             type: Array,
             default: null
         },
-        template: {
-            type: Function,
+        templates: {
+            type: null,
             default: null
         },
         exact: {
diff --git a/src/views/dock/DockDemo.vue b/src/views/dock/DockDemo.vue
index ae333e25e..58b7fc25b 100644
--- a/src/views/dock/DockDemo.vue
+++ b/src/views/dock/DockDemo.vue
@@ -13,10 +13,26 @@
 
             <h5>Basic</h5>
             <div class="dock-window">
-                <Dock :model="dockBasicItems" position="bottom"/>
-                <Dock :model="dockBasicItems" position="top"/>
-                <Dock :model="dockBasicItems" position="left"/>
-                <Dock :model="dockBasicItems" position="right"/>
+                <Dock :model="dockBasicItems" position="bottom">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </Dock>
+                <Dock :model="dockBasicItems" position="top">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </Dock>
+                <Dock :model="dockBasicItems" position="left">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </Dock>
+                <Dock :model="dockBasicItems" position="right">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </Dock>
             </div>
 
             <h5>Advanced</h5>
@@ -129,20 +145,20 @@ export default {
             ],
             dockBasicItems: [
                 {
-                    label: 'Finder',
-                    icon: () => <img alt="Finder" src="demo/images/dock/finder.svg" style="width: 100%" />
+                    label: "Finder",
+                    icon: "demo/images/dock/finder.svg"
                 },
                 {
-                    label: 'App Store',
-                    icon: () => <img alt="App Store" src="demo/images/dock/appstore.svg" style="width: 100%" />
+                    label: "App Store",
+                    icon: "demo/images/dock/appstore.svg"
                 },
                 {
-                    label: 'Photos',
-                    icon: () => <img alt="Photos" src="demo/images/dock/photos.svg" style="width: 100%" />
+                    label: "Photos",
+                    icon: "demo/images/dock/photos.svg"
                 },
                 {
-                    label: 'Trash',
-                    icon: () => <img alt="trash" src="demo/images/dock/trash.png" style="width: 100%" />
+                    label: "Trash",
+                    icon: "demo/images/dock/trash.png"
                 }
             ],
             menubarItems: [
diff --git a/src/views/dock/DockDoc.vue b/src/views/dock/DockDoc.vue
index 38d15aa08..e26cd8537 100644
--- a/src/views/dock/DockDoc.vue
+++ b/src/views/dock/DockDoc.vue
@@ -20,20 +20,20 @@ import Dock from 'primevue/dock';
             return {
                 items: [
                     {
-                        label: 'Finder',
-                        icon: () => &lt;img alt="Finder" src="demo/images/dock/finder.svg" style="width: 100%" /&gt;
+                        label: "Finder",
+                        icon: "demo/images/dock/finder.svg"
                     },
                     {
-                        label: 'App Store',
-                        icon: () => &lt;img alt="App Store" src="demo/images/dock/appstore.svg" style="width: 100%" /&gt;
+                        label: "App Store",
+                        icon: "demo/images/dock/appstore.svg"
                     },
                     {
-                        label: 'Photos',
-                        icon: () => &lt;img alt="Photos" src="demo/images/dock/photos.svg" style="width: 100%" /&gt;
+                        label: "Photos",
+                        icon: "demo/images/dock/photos.svg"
                     },
                     {
-                        label: 'Trash',
-                        icon: () => &lt;img alt="trash" src="demo/images/dock/trash.png" style="width: 100%" /&gt;
+                        label: "Trash",
+                        icon: "demo/images/dock/trash.png"
                     }
                 ]
             }
@@ -140,6 +140,10 @@ import Dock from 'primevue/dock';
                     <td>item</td>
                     <td>item: Custom content for item</td>
                 </tr>
+                <tr>
+                    <td>icon</td>
+                    <td>item: Custom content for icon</td>
+                </tr>
             </tbody>
         </table>
     </div>
@@ -166,10 +170,26 @@ export default {
 
             <h5>Basic</h5>
             <div class="dock-window">
-                <Dock :model="dockBasicItems" position="bottom"/>
-                <Dock :model="dockBasicItems" position="top"/>
-                <Dock :model="dockBasicItems" position="left"/>
-                <Dock :model="dockBasicItems" position="right"/>
+                <Dock :model="dockBasicItems" position="bottom">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </Dock>
+                <Dock :model="dockBasicItems" position="top">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </Dock>
+                <Dock :model="dockBasicItems" position="left">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </Dock>
+                <Dock :model="dockBasicItems" position="right">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </Dock>
             </div>
 
             <h5>Advanced</h5>
@@ -279,20 +299,20 @@ export default {
             ],
             dockBasicItems: [
                 {
-                    label: 'Finder',
-                    icon: () => <img alt="Finder" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
+                    label: "Finder",
+                    icon: "demo/images/dock/finder.svg"
                 },
                 {
-                    label: 'App Store',
-                    icon: () => <img alt="App Store" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
+                    label: "App Store",
+                    icon: "demo/images/dock/appstore.svg"
                 },
                 {
-                    label: 'Photos',
-                    icon: () => <img alt="Photos" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
+                    label: "Photos",
+                    icon: "demo/images/dock/photos.svg"
                 },
                 {
-                    label: 'Trash',
-                    icon: () => <img alt="trash" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
+                    label: "Trash",
+                    icon: "demo/images/dock/trash.png"
                 }
             ],
             menubarItems: [
@@ -496,6 +516,7 @@ export default {
         background-image: url("https://www.primefaces.org/wp-content/uploads/2021/02/primevue-blog.jpg");
         background-repeat: no-repeat;
         background-size: cover;
+        background-position: center;
         z-index: 1;
     }
 
@@ -550,10 +571,26 @@ export default {
 
             <h5>Basic</h5>
             <div class="dock-window">
-                <Dock :model="dockBasicItems" position="bottom"/>
-                <Dock :model="dockBasicItems" position="top"/>
-                <Dock :model="dockBasicItems" position="left"/>
-                <Dock :model="dockBasicItems" position="right"/>
+                <Dock :model="dockBasicItems" position="bottom">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </Dock>
+                <Dock :model="dockBasicItems" position="top">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </Dock>
+                <Dock :model="dockBasicItems" position="left">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </Dock>
+                <Dock :model="dockBasicItems" position="right">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </Dock>
             </div>
 
             <h5>Advanced</h5>
@@ -678,20 +715,20 @@ export default {
         ]);
         const dockBasicItems = ref([
             {
-                label: 'Finder',
-                icon: () => <img alt="Finder" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
+                label: "Finder",
+                icon: "demo/images/dock/finder.svg"
             },
             {
-                label: 'App Store',
-                icon: () => <img alt="App Store" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
+                label: "App Store",
+                icon: "demo/images/dock/appstore.svg"
             },
             {
-                label: 'Photos',
-                icon: () => <img alt="Photos" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
+                label: "Photos",
+                icon: "demo/images/dock/photos.svg"
             },
             {
-                label: 'Trash',
-                icon: () => <img alt="trash" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
+                label: "Trash",
+                icon: "demo/images/dock/trash.png"
             }
         ]);
         const menubarItems = ref([
@@ -915,6 +952,7 @@ export default {
         background-image: url("https://www.primefaces.org/wp-content/uploads/2021/02/primevue-blog.jpg");
         background-repeat: no-repeat;
         background-size: cover;
+        background-position: center;
         z-index: 1;
     }
 
@@ -976,10 +1014,26 @@ export default {
 
             <h5>Basic</h5>
             <div class="dock-window">
-                <p-dock :model="dockBasicItems" position="bottom"></p-dock>
-                <p-dock :model="dockBasicItems" position="top"></p-dock>
-                <p-dock :model="dockBasicItems" position="left"></p-dock>
-                <p-dock :model="dockBasicItems" position="right"></p-dock>
+                <p-dock :model="dockBasicItems" position="bottom">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </p-dock>
+                <p-dock :model="dockBasicItems" position="top">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </p-dock>
+                <p-dock :model="dockBasicItems" position="left">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </p-dock>
+                <p-dock :model="dockBasicItems" position="right">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </p-dock>
             </div>
 
             <h5>Advanced</h5>
@@ -1101,20 +1155,20 @@ export default {
                 ]);
                 const dockBasicItems = ref([
                     {
-                        label: 'Finder',
-                        icon: () => <img alt="Finder" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
+                        label: "Finder",
+                        icon: "demo/images/dock/finder.svg"
                     },
                     {
-                        label: 'App Store',
-                        icon: () => <img alt="App Store" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
+                        label: "App Store",
+                        icon: "demo/images/dock/appstore.svg"
                     },
                     {
-                        label: 'Photos',
-                        icon: () => <img alt="Photos" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
+                        label: "Photos",
+                        icon: "demo/images/dock/photos.svg"
                     },
                     {
-                        label: 'Trash',
-                        icon: () => <img alt="trash" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
+                        label: "Trash",
+                        icon: "demo/images/dock/trash.png"
                     }
                 ]);
                 const menubarItems = ref([
@@ -1360,6 +1414,7 @@ export default {
                 background-image: url("https://www.primefaces.org/wp-content/uploads/2021/02/primevue-blog.jpg");
                 background-repeat: no-repeat;
                 background-size: cover;
+                background-position: center;
                 z-index: 1;
             }