diff --git a/components/lib/baseicon/BaseIcon.vue b/components/lib/baseicon/BaseIcon.vue
index f96e2b676..c3d966617 100644
--- a/components/lib/baseicon/BaseIcon.vue
+++ b/components/lib/baseicon/BaseIcon.vue
@@ -6,11 +6,6 @@ import { ObjectUtils, UniqueComponentId } from 'primevue/utils';
 export default {
     name: 'BaseIcon',
     extends: BaseComponent,
-    data() {
-        return {
-            id: this.$attrs.id
-        };
-    },
     props: {
         label: {
             type: String,
@@ -22,12 +17,9 @@ export default {
         }
     },
     style: BaseIconStyle,
-    mounted() {
-        this.id = this.id || UniqueComponentId();
-    },
-    watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+    computed: {
+        pathId() {
+            return UniqueComponentId('pv_icon_clip_pv_id_');
         }
     },
     methods: {
@@ -43,7 +35,6 @@ export default {
                         }
                     ]
                 }),
-                id: this.id,
                 role: !isLabelEmpty ? 'img' : undefined,
                 'aria-label': !isLabelEmpty ? this.label : undefined,
                 'aria-hidden': isLabelEmpty
diff --git a/components/lib/icons/arrowdown/index.vue b/components/lib/icons/arrowdown/index.vue
index 34a8cfd3d..6fb604625 100644
--- a/components/lib/icons/arrowdown/index.vue
+++ b/components/lib/icons/arrowdown/index.vue
@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'ArrowDownIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/arrowup/index.vue b/components/lib/icons/arrowup/index.vue
index 1ef006010..7b7942155 100644
--- a/components/lib/icons/arrowup/index.vue
+++ b/components/lib/icons/arrowup/index.vue
@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'ArrowUpIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/ban/index.vue b/components/lib/icons/ban/index.vue
index 3dd859fff..adb1766ea 100644
--- a/components/lib/icons/ban/index.vue
+++ b/components/lib/icons/ban/index.vue
@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'BanIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/exclamationtriangle/index.vue b/components/lib/icons/exclamationtriangle/index.vue
index 57ebb36da..cc17dbd01 100644
--- a/components/lib/icons/exclamationtriangle/index.vue
+++ b/components/lib/icons/exclamationtriangle/index.vue
@@ -27,11 +27,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'ExclamationTriangleIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/eyeslash/index.vue b/components/lib/icons/eyeslash/index.vue
index af6f8357b..4498665f5 100644
--- a/components/lib/icons/eyeslash/index.vue
+++ b/components/lib/icons/eyeslash/index.vue
@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'EyeSlashIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/filter/index.vue b/components/lib/icons/filter/index.vue
index 4b8a2e8cc..695379233 100644
--- a/components/lib/icons/filter/index.vue
+++ b/components/lib/icons/filter/index.vue
@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'FilterIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/filterslash/index.vue b/components/lib/icons/filterslash/index.vue
index 31862f01c..b4db4b9fb 100644
--- a/components/lib/icons/filterslash/index.vue
+++ b/components/lib/icons/filterslash/index.vue
@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'FilterSlashIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/infocircle/index.vue b/components/lib/icons/infocircle/index.vue
index 2781d2b9e..3d0448408 100644
--- a/components/lib/icons/infocircle/index.vue
+++ b/components/lib/icons/infocircle/index.vue
@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'InfoCircleIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/pencil/index.vue b/components/lib/icons/pencil/index.vue
index 8016b2b42..34bc18637 100644
--- a/components/lib/icons/pencil/index.vue
+++ b/components/lib/icons/pencil/index.vue
@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'PencilIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/plus/index.vue b/components/lib/icons/plus/index.vue
index 276ed2451..49763128f 100644
--- a/components/lib/icons/plus/index.vue
+++ b/components/lib/icons/plus/index.vue
@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'PlusIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/refresh/index.vue b/components/lib/icons/refresh/index.vue
index 1eeec51ad..70be4d185 100644
--- a/components/lib/icons/refresh/index.vue
+++ b/components/lib/icons/refresh/index.vue
@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'RefreshIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/search/index.vue b/components/lib/icons/search/index.vue
index ad123cf7d..9f1ea82da 100644
--- a/components/lib/icons/search/index.vue
+++ b/components/lib/icons/search/index.vue
@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'SearchIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/searchminus/index.vue b/components/lib/icons/searchminus/index.vue
index 6fc2408ab..d38fa666e 100644
--- a/components/lib/icons/searchminus/index.vue
+++ b/components/lib/icons/searchminus/index.vue
@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'SearchMinusIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/searchplus/index.vue b/components/lib/icons/searchplus/index.vue
index 1dd661c66..fc32babcd 100644
--- a/components/lib/icons/searchplus/index.vue
+++ b/components/lib/icons/searchplus/index.vue
@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'SearchPlusIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/sortalt/index.vue b/components/lib/icons/sortalt/index.vue
index e7d97fc58..9a6ae84fe 100644
--- a/components/lib/icons/sortalt/index.vue
+++ b/components/lib/icons/sortalt/index.vue
@@ -25,11 +25,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'SortAltIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/sortamountdown/index.vue b/components/lib/icons/sortamountdown/index.vue
index dc00cdebd..34eff774f 100644
--- a/components/lib/icons/sortamountdown/index.vue
+++ b/components/lib/icons/sortamountdown/index.vue
@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'SortAmountDownIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/sortamountupalt/index.vue b/components/lib/icons/sortamountupalt/index.vue
index 9d2a5f9da..64a8c3b59 100644
--- a/components/lib/icons/sortamountupalt/index.vue
+++ b/components/lib/icons/sortamountupalt/index.vue
@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'SortAmountUpAltIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/spinner/index.vue b/components/lib/icons/spinner/index.vue
index b869b2916..7b0c1341c 100644
--- a/components/lib/icons/spinner/index.vue
+++ b/components/lib/icons/spinner/index.vue
@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'SpinnerIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/star/index.vue b/components/lib/icons/star/index.vue
index bde265ec5..514d94048 100644
--- a/components/lib/icons/star/index.vue
+++ b/components/lib/icons/star/index.vue
@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'StarIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/starfill/index.vue b/components/lib/icons/starfill/index.vue
index 7df9aa22c..1dc455ed8 100644
--- a/components/lib/icons/starfill/index.vue
+++ b/components/lib/icons/starfill/index.vue
@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'StarFillIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/thlarge/index.vue b/components/lib/icons/thlarge/index.vue
index 190832ba5..c11bffd1e 100644
--- a/components/lib/icons/thlarge/index.vue
+++ b/components/lib/icons/thlarge/index.vue
@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'ThLargeIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/timescircle/index.vue b/components/lib/icons/timescircle/index.vue
index 0ad82f88c..80209a872 100644
--- a/components/lib/icons/timescircle/index.vue
+++ b/components/lib/icons/timescircle/index.vue
@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'TimesCircleIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/trash/index.vue b/components/lib/icons/trash/index.vue
index fb6641e8e..ac3b998d8 100644
--- a/components/lib/icons/trash/index.vue
+++ b/components/lib/icons/trash/index.vue
@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'TrashIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/undo/index.vue b/components/lib/icons/undo/index.vue
index c29b17ba6..4545c4f9d 100644
--- a/components/lib/icons/undo/index.vue
+++ b/components/lib/icons/undo/index.vue
@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'UndoIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/upload/index.vue b/components/lib/icons/upload/index.vue
index d8d4a72cd..9eb013f29 100644
--- a/components/lib/icons/upload/index.vue
+++ b/components/lib/icons/upload/index.vue
@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'UploadIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/windowmaximize/index.vue b/components/lib/icons/windowmaximize/index.vue
index 31b135c41..5dd960f26 100644
--- a/components/lib/icons/windowmaximize/index.vue
+++ b/components/lib/icons/windowmaximize/index.vue
@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'WindowMaximizeIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>
diff --git a/components/lib/icons/windowminimize/index.vue b/components/lib/icons/windowminimize/index.vue
index 336fa9e91..be232cdc3 100644
--- a/components/lib/icons/windowminimize/index.vue
+++ b/components/lib/icons/windowminimize/index.vue
@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'WindowMinimizeIcon',
-    extends: BaseIcon,
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
+    extends: BaseIcon
 };
 </script>