From 19cd180575c712b1987b55dee582a7083a77a1b5 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 23 Jan 2024 12:33:54 +0300
Subject: [PATCH 1/2] Fixed #5046 - DataTable: Hydration attribute mismatch
 with sortable columns

---
 components/lib/baseicon/BaseIcon.vue             | 16 +++++++++++++++-
 components/lib/icons/arrowdown/index.vue         |  3 +--
 components/lib/icons/arrowup/index.vue           |  3 +--
 components/lib/icons/ban/index.vue               |  3 +--
 .../lib/icons/exclamationtriangle/index.vue      |  3 +--
 components/lib/icons/eyeslash/index.vue          |  3 +--
 components/lib/icons/filter/index.vue            |  3 +--
 components/lib/icons/filterslash/index.vue       |  3 +--
 components/lib/icons/infocircle/index.vue        |  3 +--
 components/lib/icons/pencil/index.vue            |  3 +--
 components/lib/icons/plus/index.vue              |  3 +--
 components/lib/icons/refresh/index.vue           |  3 +--
 components/lib/icons/search/index.vue            |  3 +--
 components/lib/icons/searchminus/index.vue       |  3 +--
 components/lib/icons/searchplus/index.vue        |  3 +--
 components/lib/icons/sortalt/index.vue           |  3 +--
 components/lib/icons/sortamountdown/index.vue    |  3 +--
 components/lib/icons/sortamountupalt/index.vue   |  3 +--
 components/lib/icons/spinner/index.vue           |  3 +--
 components/lib/icons/star/index.vue              |  3 +--
 components/lib/icons/starfill/index.vue          |  3 +--
 components/lib/icons/thlarge/index.vue           |  3 +--
 components/lib/icons/timescircle/index.vue       |  3 +--
 components/lib/icons/trash/index.vue             |  3 +--
 components/lib/icons/undo/index.vue              |  3 +--
 components/lib/icons/upload/index.vue            |  3 +--
 components/lib/icons/windowmaximize/index.vue    |  3 +--
 components/lib/icons/windowminimize/index.vue    |  3 +--
 28 files changed, 42 insertions(+), 55 deletions(-)

diff --git a/components/lib/baseicon/BaseIcon.vue b/components/lib/baseicon/BaseIcon.vue
index bd92349e3..f96e2b676 100644
--- a/components/lib/baseicon/BaseIcon.vue
+++ b/components/lib/baseicon/BaseIcon.vue
@@ -1,11 +1,16 @@
 <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',
     extends: BaseComponent,
+    data() {
+        return {
+            id: this.$attrs.id
+        };
+    },
     props: {
         label: {
             type: String,
@@ -17,6 +22,14 @@ export default {
         }
     },
     style: BaseIconStyle,
+    mounted() {
+        this.id = this.id || UniqueComponentId();
+    },
+    watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
+        }
+    },
     methods: {
         pti() {
             const isLabelEmpty = ObjectUtils.isEmpty(this.label);
@@ -30,6 +43,7 @@ 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 5bad84f86..34a8cfd3d 100644
--- a/components/lib/icons/arrowdown/index.vue
+++ b/components/lib/icons/arrowdown/index.vue
@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ArrowDownIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/arrowup/index.vue b/components/lib/icons/arrowup/index.vue
index 072007549..1ef006010 100644
--- a/components/lib/icons/arrowup/index.vue
+++ b/components/lib/icons/arrowup/index.vue
@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ArrowUpIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/ban/index.vue b/components/lib/icons/ban/index.vue
index 5e70f53c0..3dd859fff 100644
--- a/components/lib/icons/ban/index.vue
+++ b/components/lib/icons/ban/index.vue
@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'BanIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/exclamationtriangle/index.vue b/components/lib/icons/exclamationtriangle/index.vue
index 4bc0e5779..57ebb36da 100644
--- a/components/lib/icons/exclamationtriangle/index.vue
+++ b/components/lib/icons/exclamationtriangle/index.vue
@@ -24,14 +24,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ExclamationTriangleIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/eyeslash/index.vue b/components/lib/icons/eyeslash/index.vue
index b264b7c05..af6f8357b 100644
--- a/components/lib/icons/eyeslash/index.vue
+++ b/components/lib/icons/eyeslash/index.vue
@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'EyeSlashIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/filter/index.vue b/components/lib/icons/filter/index.vue
index 46be2acce..4b8a2e8cc 100644
--- a/components/lib/icons/filter/index.vue
+++ b/components/lib/icons/filter/index.vue
@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'FilterIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/filterslash/index.vue b/components/lib/icons/filterslash/index.vue
index ab0cd3590..31862f01c 100644
--- a/components/lib/icons/filterslash/index.vue
+++ b/components/lib/icons/filterslash/index.vue
@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'FilterSlashIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/infocircle/index.vue b/components/lib/icons/infocircle/index.vue
index e2afe44b1..2781d2b9e 100644
--- a/components/lib/icons/infocircle/index.vue
+++ b/components/lib/icons/infocircle/index.vue
@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'InfoCircleIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/pencil/index.vue b/components/lib/icons/pencil/index.vue
index 99e6ad30e..8016b2b42 100644
--- a/components/lib/icons/pencil/index.vue
+++ b/components/lib/icons/pencil/index.vue
@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'PencilIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/plus/index.vue b/components/lib/icons/plus/index.vue
index 965cdf60b..276ed2451 100644
--- a/components/lib/icons/plus/index.vue
+++ b/components/lib/icons/plus/index.vue
@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'PlusIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/refresh/index.vue b/components/lib/icons/refresh/index.vue
index 024471192..1eeec51ad 100644
--- a/components/lib/icons/refresh/index.vue
+++ b/components/lib/icons/refresh/index.vue
@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'RefreshIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/search/index.vue b/components/lib/icons/search/index.vue
index 78a62eb81..ad123cf7d 100644
--- a/components/lib/icons/search/index.vue
+++ b/components/lib/icons/search/index.vue
@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SearchIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/searchminus/index.vue b/components/lib/icons/searchminus/index.vue
index 972863871..6fc2408ab 100644
--- a/components/lib/icons/searchminus/index.vue
+++ b/components/lib/icons/searchminus/index.vue
@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SearchMinusIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/searchplus/index.vue b/components/lib/icons/searchplus/index.vue
index 187f4ee17..1dd661c66 100644
--- a/components/lib/icons/searchplus/index.vue
+++ b/components/lib/icons/searchplus/index.vue
@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SearchPlusIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/sortalt/index.vue b/components/lib/icons/sortalt/index.vue
index 8f7f50f51..e7d97fc58 100644
--- a/components/lib/icons/sortalt/index.vue
+++ b/components/lib/icons/sortalt/index.vue
@@ -22,14 +22,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SortAltIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/sortamountdown/index.vue b/components/lib/icons/sortamountdown/index.vue
index 05ec9d2e6..dc00cdebd 100644
--- a/components/lib/icons/sortamountdown/index.vue
+++ b/components/lib/icons/sortamountdown/index.vue
@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SortAmountDownIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/sortamountupalt/index.vue b/components/lib/icons/sortamountupalt/index.vue
index 8ec53a00c..9d2a5f9da 100644
--- a/components/lib/icons/sortamountupalt/index.vue
+++ b/components/lib/icons/sortamountupalt/index.vue
@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SortAmountUpAltIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/spinner/index.vue b/components/lib/icons/spinner/index.vue
index c6638c649..b869b2916 100644
--- a/components/lib/icons/spinner/index.vue
+++ b/components/lib/icons/spinner/index.vue
@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SpinnerIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/star/index.vue b/components/lib/icons/star/index.vue
index c65889a49..bde265ec5 100644
--- a/components/lib/icons/star/index.vue
+++ b/components/lib/icons/star/index.vue
@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'StarIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/starfill/index.vue b/components/lib/icons/starfill/index.vue
index df89428bd..7df9aa22c 100644
--- a/components/lib/icons/starfill/index.vue
+++ b/components/lib/icons/starfill/index.vue
@@ -16,14 +16,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'StarFillIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/thlarge/index.vue b/components/lib/icons/thlarge/index.vue
index 623ea684c..190832ba5 100644
--- a/components/lib/icons/thlarge/index.vue
+++ b/components/lib/icons/thlarge/index.vue
@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ThLargeIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/timescircle/index.vue b/components/lib/icons/timescircle/index.vue
index 2967b8453..0ad82f88c 100644
--- a/components/lib/icons/timescircle/index.vue
+++ b/components/lib/icons/timescircle/index.vue
@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'TimesCircleIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/trash/index.vue b/components/lib/icons/trash/index.vue
index cb28e47ac..fb6641e8e 100644
--- a/components/lib/icons/trash/index.vue
+++ b/components/lib/icons/trash/index.vue
@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'TrashIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/undo/index.vue b/components/lib/icons/undo/index.vue
index 987edcd5c..c29b17ba6 100644
--- a/components/lib/icons/undo/index.vue
+++ b/components/lib/icons/undo/index.vue
@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'UndoIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/upload/index.vue b/components/lib/icons/upload/index.vue
index 5535c0160..d8d4a72cd 100644
--- a/components/lib/icons/upload/index.vue
+++ b/components/lib/icons/upload/index.vue
@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'UploadIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/windowmaximize/index.vue b/components/lib/icons/windowmaximize/index.vue
index 2e979d4a2..31b135c41 100644
--- a/components/lib/icons/windowmaximize/index.vue
+++ b/components/lib/icons/windowmaximize/index.vue
@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'WindowMaximizeIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };
diff --git a/components/lib/icons/windowminimize/index.vue b/components/lib/icons/windowminimize/index.vue
index 27ac09ba2..336fa9e91 100644
--- a/components/lib/icons/windowminimize/index.vue
+++ b/components/lib/icons/windowminimize/index.vue
@@ -18,14 +18,13 @@
 
 <script>
 import BaseIcon from 'primevue/baseicon';
-import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'WindowMinimizeIcon',
     extends: BaseIcon,
     computed: {
         pathId() {
-            return `pv_icon_clip_${UniqueComponentId()}`;
+            return `pv_icon_clip_${this.id}`;
         }
     }
 };

From 6ccebe113b2dc08b4f4edc61e9f38a437825219d Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 23 Jan 2024 16:04:37 +0300
Subject: [PATCH 2/2] Refactor #5046

---
 components/lib/baseicon/BaseIcon.vue              | 15 +++------------
 components/lib/icons/arrowdown/index.vue          |  7 +------
 components/lib/icons/arrowup/index.vue            |  7 +------
 components/lib/icons/ban/index.vue                |  7 +------
 .../lib/icons/exclamationtriangle/index.vue       |  7 +------
 components/lib/icons/eyeslash/index.vue           |  7 +------
 components/lib/icons/filter/index.vue             |  7 +------
 components/lib/icons/filterslash/index.vue        |  7 +------
 components/lib/icons/infocircle/index.vue         |  7 +------
 components/lib/icons/pencil/index.vue             |  7 +------
 components/lib/icons/plus/index.vue               |  7 +------
 components/lib/icons/refresh/index.vue            |  7 +------
 components/lib/icons/search/index.vue             |  7 +------
 components/lib/icons/searchminus/index.vue        |  7 +------
 components/lib/icons/searchplus/index.vue         |  7 +------
 components/lib/icons/sortalt/index.vue            |  7 +------
 components/lib/icons/sortamountdown/index.vue     |  7 +------
 components/lib/icons/sortamountupalt/index.vue    |  7 +------
 components/lib/icons/spinner/index.vue            |  7 +------
 components/lib/icons/star/index.vue               |  7 +------
 components/lib/icons/starfill/index.vue           |  7 +------
 components/lib/icons/thlarge/index.vue            |  7 +------
 components/lib/icons/timescircle/index.vue        |  7 +------
 components/lib/icons/trash/index.vue              |  7 +------
 components/lib/icons/undo/index.vue               |  7 +------
 components/lib/icons/upload/index.vue             |  7 +------
 components/lib/icons/windowmaximize/index.vue     |  7 +------
 components/lib/icons/windowminimize/index.vue     |  7 +------
 28 files changed, 30 insertions(+), 174 deletions(-)

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>