diff --git a/components/lib/baseicon/BaseIcon.vue b/components/lib/baseicon/BaseIcon.vue
index bd92349e3..c3d966617 100644
--- a/components/lib/baseicon/BaseIcon.vue
+++ b/components/lib/baseicon/BaseIcon.vue
@@ -1,7 +1,7 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
 import BaseIconStyle from 'primevue/baseicon/style';
-import { ObjectUtils } from 'primevue/utils';
+import { ObjectUtils, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'BaseIcon',
@@ -17,6 +17,11 @@ export default {
         }
     },
     style: BaseIconStyle,
+    computed: {
+        pathId() {
+            return UniqueComponentId('pv_icon_clip_pv_id_');
+        }
+    },
     methods: {
         pti() {
             const isLabelEmpty = ObjectUtils.isEmpty(this.label);
diff --git a/components/lib/icons/arrowdown/index.vue b/components/lib/icons/arrowdown/index.vue
index 5bad84f86..6fb604625 100644
--- a/components/lib/icons/arrowdown/index.vue
+++ b/components/lib/icons/arrowdown/index.vue
@@ -18,15 +18,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ArrowDownIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/arrowup/index.vue b/components/lib/icons/arrowup/index.vue
index 072007549..7b7942155 100644
--- a/components/lib/icons/arrowup/index.vue
+++ b/components/lib/icons/arrowup/index.vue
@@ -18,15 +18,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ArrowUpIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/ban/index.vue b/components/lib/icons/ban/index.vue
index 5e70f53c0..adb1766ea 100644
--- a/components/lib/icons/ban/index.vue
+++ b/components/lib/icons/ban/index.vue
@@ -16,15 +16,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'BanIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/exclamationtriangle/index.vue b/components/lib/icons/exclamationtriangle/index.vue
index 4bc0e5779..cc17dbd01 100644
--- a/components/lib/icons/exclamationtriangle/index.vue
+++ b/components/lib/icons/exclamationtriangle/index.vue
@@ -24,15 +24,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ExclamationTriangleIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/eyeslash/index.vue b/components/lib/icons/eyeslash/index.vue
index b264b7c05..4498665f5 100644
--- a/components/lib/icons/eyeslash/index.vue
+++ b/components/lib/icons/eyeslash/index.vue
@@ -18,15 +18,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'EyeSlashIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/filter/index.vue b/components/lib/icons/filter/index.vue
index 46be2acce..695379233 100644
--- a/components/lib/icons/filter/index.vue
+++ b/components/lib/icons/filter/index.vue
@@ -16,15 +16,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'FilterIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/filterslash/index.vue b/components/lib/icons/filterslash/index.vue
index ab0cd3590..b4db4b9fb 100644
--- a/components/lib/icons/filterslash/index.vue
+++ b/components/lib/icons/filterslash/index.vue
@@ -18,15 +18,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'FilterSlashIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/infocircle/index.vue b/components/lib/icons/infocircle/index.vue
index e2afe44b1..3d0448408 100644
--- a/components/lib/icons/infocircle/index.vue
+++ b/components/lib/icons/infocircle/index.vue
@@ -18,15 +18,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'InfoCircleIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/pencil/index.vue b/components/lib/icons/pencil/index.vue
index 99e6ad30e..34bc18637 100644
--- a/components/lib/icons/pencil/index.vue
+++ b/components/lib/icons/pencil/index.vue
@@ -16,15 +16,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'PencilIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/plus/index.vue b/components/lib/icons/plus/index.vue
index 965cdf60b..49763128f 100644
--- a/components/lib/icons/plus/index.vue
+++ b/components/lib/icons/plus/index.vue
@@ -16,15 +16,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'PlusIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/refresh/index.vue b/components/lib/icons/refresh/index.vue
index 024471192..70be4d185 100644
--- a/components/lib/icons/refresh/index.vue
+++ b/components/lib/icons/refresh/index.vue
@@ -18,15 +18,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'RefreshIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/search/index.vue b/components/lib/icons/search/index.vue
index 78a62eb81..9f1ea82da 100644
--- a/components/lib/icons/search/index.vue
+++ b/components/lib/icons/search/index.vue
@@ -18,15 +18,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SearchIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/searchminus/index.vue b/components/lib/icons/searchminus/index.vue
index 972863871..d38fa666e 100644
--- a/components/lib/icons/searchminus/index.vue
+++ b/components/lib/icons/searchminus/index.vue
@@ -18,15 +18,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SearchMinusIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/searchplus/index.vue b/components/lib/icons/searchplus/index.vue
index 187f4ee17..fc32babcd 100644
--- a/components/lib/icons/searchplus/index.vue
+++ b/components/lib/icons/searchplus/index.vue
@@ -18,15 +18,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SearchPlusIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/sortalt/index.vue b/components/lib/icons/sortalt/index.vue
index 8f7f50f51..9a6ae84fe 100644
--- a/components/lib/icons/sortalt/index.vue
+++ b/components/lib/icons/sortalt/index.vue
@@ -22,15 +22,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SortAltIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/sortamountdown/index.vue b/components/lib/icons/sortamountdown/index.vue
index 05ec9d2e6..34eff774f 100644
--- a/components/lib/icons/sortamountdown/index.vue
+++ b/components/lib/icons/sortamountdown/index.vue
@@ -16,15 +16,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SortAmountDownIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/sortamountupalt/index.vue b/components/lib/icons/sortamountupalt/index.vue
index 8ec53a00c..64a8c3b59 100644
--- a/components/lib/icons/sortamountupalt/index.vue
+++ b/components/lib/icons/sortamountupalt/index.vue
@@ -16,15 +16,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SortAmountUpAltIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/spinner/index.vue b/components/lib/icons/spinner/index.vue
index c6638c649..7b0c1341c 100644
--- a/components/lib/icons/spinner/index.vue
+++ b/components/lib/icons/spinner/index.vue
@@ -16,15 +16,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SpinnerIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/star/index.vue b/components/lib/icons/star/index.vue
index c65889a49..514d94048 100644
--- a/components/lib/icons/star/index.vue
+++ b/components/lib/icons/star/index.vue
@@ -16,15 +16,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'StarIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/starfill/index.vue b/components/lib/icons/starfill/index.vue
index df89428bd..1dc455ed8 100644
--- a/components/lib/icons/starfill/index.vue
+++ b/components/lib/icons/starfill/index.vue
@@ -16,15 +16,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'StarFillIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/thlarge/index.vue b/components/lib/icons/thlarge/index.vue
index 623ea684c..c11bffd1e 100644
--- a/components/lib/icons/thlarge/index.vue
+++ b/components/lib/icons/thlarge/index.vue
@@ -18,15 +18,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ThLargeIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/timescircle/index.vue b/components/lib/icons/timescircle/index.vue
index 2967b8453..80209a872 100644
--- a/components/lib/icons/timescircle/index.vue
+++ b/components/lib/icons/timescircle/index.vue
@@ -18,15 +18,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'TimesCircleIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/trash/index.vue b/components/lib/icons/trash/index.vue
index cb28e47ac..ac3b998d8 100644
--- a/components/lib/icons/trash/index.vue
+++ b/components/lib/icons/trash/index.vue
@@ -18,15 +18,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'TrashIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/undo/index.vue b/components/lib/icons/undo/index.vue
index 987edcd5c..4545c4f9d 100644
--- a/components/lib/icons/undo/index.vue
+++ b/components/lib/icons/undo/index.vue
@@ -18,15 +18,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'UndoIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/upload/index.vue b/components/lib/icons/upload/index.vue
index 5535c0160..9eb013f29 100644
--- a/components/lib/icons/upload/index.vue
+++ b/components/lib/icons/upload/index.vue
@@ -18,15 +18,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'UploadIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/windowmaximize/index.vue b/components/lib/icons/windowmaximize/index.vue
index 2e979d4a2..5dd960f26 100644
--- a/components/lib/icons/windowmaximize/index.vue
+++ b/components/lib/icons/windowmaximize/index.vue
@@ -18,15 +18,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'WindowMaximizeIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/windowminimize/index.vue b/components/lib/icons/windowminimize/index.vue
index 27ac09ba2..be232cdc3 100644
--- a/components/lib/icons/windowminimize/index.vue
+++ b/components/lib/icons/windowminimize/index.vue
@@ -18,15 +18,9 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'WindowMinimizeIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>