diff --git a/components/lib/icons/arrowdown/index.vue b/components/lib/icons/arrowdown/index.vue
index e8e10b1c1..2226faf58 100644
--- a/components/lib/icons/arrowdown/index.vue
+++ b/components/lib/icons/arrowdown/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_326_12468)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_326_12468">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ArrowDownIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/arrowup/index.vue b/components/lib/icons/arrowup/index.vue
index a82b3a14e..ebcc85184 100644
--- a/components/lib/icons/arrowup/index.vue
+++ b/components/lib/icons/arrowup/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_326_12509)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_326_12509">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ArrowUpIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/ban/index.vue b/components/lib/icons/ban/index.vue
index 8d2350907..a8d252306 100644
--- a/components/lib/icons/ban/index.vue
+++ b/components/lib/icons/ban/index.vue
@@ -1,23 +1,30 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_288_11866)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 d="M7 0C5.61553 0 4.26215 0.410543 3.11101 1.17971C1.95987 1.94888 1.06266 3.04213 0.532846 4.32122C0.00303296 5.6003 -0.13559 7.00776 0.134506 8.36563C0.404603 9.7235 1.07129 10.9708 2.05026 11.9497C3.02922 12.9287 4.2765 13.5954 5.63437 13.8655C6.99224 14.1356 8.3997 13.997 9.67879 13.4672C10.9579 12.9373 12.0511 12.0401 12.8203 10.889C13.5895 9.73785 14 8.38447 14 7C14 5.14348 13.2625 3.36301 11.9497 2.05025C10.637 0.737498 8.85652 0 7 0ZM1.16667 7C1.16549 5.65478 1.63303 4.35118 2.48889 3.31333L10.6867 11.5111C9.83309 12.2112 8.79816 12.6544 7.70243 12.789C6.60669 12.9236 5.49527 12.744 4.49764 12.2713C3.50001 11.7986 2.65724 11.0521 2.06751 10.1188C1.47778 9.18558 1.16537 8.10397 1.16667 7ZM11.5111 10.6867L3.31334 2.48889C4.43144 1.57388 5.84966 1.10701 7.29265 1.1789C8.73565 1.2508 10.1004 1.85633 11.1221 2.87795C12.1437 3.89956 12.7492 5.26435 12.8211 6.70735C12.893 8.15034 12.4261 9.56856 11.5111 10.6867Z"
                 fill="currentColor"
             />
         </g>
         <defs>
-            <clipPath id="clip0_288_11866">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'BanIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/exclamationtriangle/index.vue b/components/lib/icons/exclamationtriangle/index.vue
index 1330cb3d0..dff93a799 100644
--- a/components/lib/icons/exclamationtriangle/index.vue
+++ b/components/lib/icons/exclamationtriangle/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_323_12417)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 d="M13.4018 13.1893H0.598161C0.49329 13.189 0.390283 13.1615 0.299143 13.1097C0.208003 13.0578 0.131826 12.9832 0.0780112 12.8932C0.0268539 12.8015 0 12.6982 0 12.5931C0 12.4881 0.0268539 12.3848 0.0780112 12.293L6.47985 1.08982C6.53679 1.00399 6.61408 0.933574 6.70484 0.884867C6.7956 0.836159 6.897 0.810669 7 0.810669C7.103 0.810669 7.2044 0.836159 7.29516 0.884867C7.38592 0.933574 7.46321 1.00399 7.52015 1.08982L13.922 12.293C13.9731 12.3848 14 12.4881 14 12.5931C14 12.6982 13.9731 12.8015 13.922 12.8932C13.8682 12.9832 13.792 13.0578 13.7009 13.1097C13.6097 13.1615 13.5067 13.189 13.4018 13.1893ZM1.63046 11.989H12.3695L7 2.59425L1.63046 11.989Z"
                 fill="currentColor"
@@ -15,17 +15,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_323_12417">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ExclamationTriangleIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/eyeslash/index.vue b/components/lib/icons/eyeslash/index.vue
index 0c3fc5613..98d872c56 100644
--- a/components/lib/icons/eyeslash/index.vue
+++ b/components/lib/icons/eyeslash/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_287_10550)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_287_10550">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'EyeSlashIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/filter/index.vue b/components/lib/icons/filter/index.vue
index dfec040c1..c616bf67c 100644
--- a/components/lib/icons/filter/index.vue
+++ b/components/lib/icons/filter/index.vue
@@ -1,23 +1,30 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_390_17708)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 d="M8.64708 14H5.35296C5.18981 13.9979 5.03395 13.9321 4.91858 13.8167C4.8032 13.7014 4.73745 13.5455 4.73531 13.3824V7L0.329431 0.98C0.259794 0.889466 0.217389 0.780968 0.20718 0.667208C0.19697 0.553448 0.219379 0.439133 0.271783 0.337647C0.324282 0.236453 0.403423 0.151519 0.500663 0.0920138C0.597903 0.0325088 0.709548 0.000692754 0.823548 0H13.1765C13.2905 0.000692754 13.4021 0.0325088 13.4994 0.0920138C13.5966 0.151519 13.6758 0.236453 13.7283 0.337647C13.7807 0.439133 13.8031 0.553448 13.7929 0.667208C13.7826 0.780968 13.7402 0.889466 13.6706 0.98L9.26472 7V13.3824C9.26259 13.5455 9.19683 13.7014 9.08146 13.8167C8.96609 13.9321 8.81022 13.9979 8.64708 14ZM5.97061 12.7647H8.02943V6.79412C8.02878 6.66289 8.07229 6.53527 8.15296 6.43177L11.9412 1.23529H2.05884L5.86355 6.43177C5.94422 6.53527 5.98773 6.66289 5.98708 6.79412L5.97061 12.7647Z"
                 fill="currentColor"
             />
         </g>
         <defs>
-            <clipPath id="clip0_390_17708">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'FilterIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/filterslash/index.vue b/components/lib/icons/filterslash/index.vue
index 898951b17..518f6cc17 100644
--- a/components/lib/icons/filterslash/index.vue
+++ b/components/lib/icons/filterslash/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_408_20963)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_408_20963">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'FilterSlashIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/infocircle/index.vue b/components/lib/icons/infocircle/index.vue
index 8bf41dd70..653f5438c 100644
--- a/components/lib/icons/infocircle/index.vue
+++ b/components/lib/icons/infocircle/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_408_21102)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_408_21102">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'InfoCircleIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/pencil/index.vue b/components/lib/icons/pencil/index.vue
index 6b34c976c..ba7d6787e 100644
--- a/components/lib/icons/pencil/index.vue
+++ b/components/lib/icons/pencil/index.vue
@@ -1,23 +1,30 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_414_20836)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 d="M0.609628 13.959C0.530658 13.9599 0.452305 13.9451 0.379077 13.9156C0.305849 13.8861 0.239191 13.8424 0.18294 13.787C0.118447 13.7234 0.0688234 13.6464 0.0376166 13.5614C0.00640987 13.4765 -0.00560954 13.3857 0.00241768 13.2956L0.25679 10.1501C0.267698 10.0041 0.331934 9.86709 0.437312 9.76516L9.51265 0.705715C10.0183 0.233014 10.6911 -0.0203041 11.3835 0.00127367C12.0714 0.00660201 12.7315 0.27311 13.2298 0.746671C13.7076 1.23651 13.9824 1.88848 13.9992 2.57201C14.0159 3.25554 13.7733 3.92015 13.32 4.4327L4.23648 13.5331C4.13482 13.6342 4.0017 13.6978 3.85903 13.7133L0.667067 14L0.609628 13.959ZM1.43018 10.4696L1.25787 12.714L3.50619 12.5092L12.4502 3.56444C12.6246 3.35841 12.7361 3.10674 12.7714 2.83933C12.8067 2.57193 12.7644 2.30002 12.6495 2.05591C12.5346 1.8118 12.3519 1.60575 12.1231 1.46224C11.8943 1.31873 11.6291 1.2438 11.3589 1.24633C11.1813 1.23508 11.0033 1.25975 10.8355 1.31887C10.6677 1.37798 10.5136 1.47033 10.3824 1.59036L1.43018 10.4696Z"
                 fill="currentColor"
             />
         </g>
         <defs>
-            <clipPath id="clip0_414_20836">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'PencilIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/plus/index.vue b/components/lib/icons/plus/index.vue
index fb9c50c5e..0478cc5c7 100644
--- a/components/lib/icons/plus/index.vue
+++ b/components/lib/icons/plus/index.vue
@@ -1,23 +1,30 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_306_11939)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 d="M7.67742 6.32258V0.677419C7.67742 0.497757 7.60605 0.325452 7.47901 0.198411C7.35197 0.0713707 7.17966 0 7 0C6.82034 0 6.64803 0.0713707 6.52099 0.198411C6.39395 0.325452 6.32258 0.497757 6.32258 0.677419V6.32258H0.677419C0.497757 6.32258 0.325452 6.39395 0.198411 6.52099C0.0713707 6.64803 0 6.82034 0 7C0 7.17966 0.0713707 7.35197 0.198411 7.47901C0.325452 7.60605 0.497757 7.67742 0.677419 7.67742H6.32258V13.3226C6.32492 13.5015 6.39704 13.6725 6.52358 13.799C6.65012 13.9255 6.82106 13.9977 7 14C7.17966 14 7.35197 13.9286 7.47901 13.8016C7.60605 13.6745 7.67742 13.5022 7.67742 13.3226V7.67742H13.3226C13.5022 7.67742 13.6745 7.60605 13.8016 7.47901C13.9286 7.35197 14 7.17966 14 7C13.9977 6.82106 13.9255 6.65012 13.799 6.52358C13.6725 6.39704 13.5015 6.32492 13.3226 6.32258H7.67742Z"
                 fill="currentColor"
             />
         </g>
         <defs>
-            <clipPath id="clip0_306_11939">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'PlusIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/refresh/index.vue b/components/lib/icons/refresh/index.vue
index f5b3bc775..429411304 100644
--- a/components/lib/icons/refresh/index.vue
+++ b/components/lib/icons/refresh/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_414_20758)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_414_20758">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'RefreshIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/search/index.vue b/components/lib/icons/search/index.vue
index f0e74b0c1..48ae29b75 100644
--- a/components/lib/icons/search/index.vue
+++ b/components/lib/icons/search/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_238_9909)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_238_9909">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SearchIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/searchminus/index.vue b/components/lib/icons/searchminus/index.vue
index a5aabf874..6e10b2239 100644
--- a/components/lib/icons/searchminus/index.vue
+++ b/components/lib/icons/searchminus/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_417_21152)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_417_21152">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SearchMinusIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/searchplus/index.vue b/components/lib/icons/searchplus/index.vue
index f812f277f..8118ee595 100644
--- a/components/lib/icons/searchplus/index.vue
+++ b/components/lib/icons/searchplus/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_417_21164)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_417_21164">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SearchPlusIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/sortalt/index.vue b/components/lib/icons/sortalt/index.vue
index 02cd29ff2..5d254dd96 100644
--- a/components/lib/icons/sortalt/index.vue
+++ b/components/lib/icons/sortalt/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_378_15529)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 d="M5.64515 3.61291C5.47353 3.61291 5.30192 3.54968 5.16644 3.4142L3.38708 1.63484L1.60773 3.4142C1.34579 3.67613 0.912244 3.67613 0.650309 3.4142C0.388374 3.15226 0.388374 2.71871 0.650309 2.45678L2.90837 0.198712C3.17031 -0.0632236 3.60386 -0.0632236 3.86579 0.198712L6.12386 2.45678C6.38579 2.71871 6.38579 3.15226 6.12386 3.4142C5.98837 3.54968 5.81676 3.61291 5.64515 3.61291Z"
                 fill="currentColor"
@@ -13,17 +13,24 @@
             <path d="M10.6129 14C10.2426 14 9.93552 13.6929 9.93552 13.3226V0.677419C9.93552 0.307097 10.2426 0 10.6129 0C10.9833 0 11.2904 0.307097 11.2904 0.677419V13.3226C11.2904 13.6929 10.9832 14 10.6129 14Z" fill="currentColor" />
         </g>
         <defs>
-            <clipPath id="clip0_378_15529">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SortAltIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/sortamountdown/index.vue b/components/lib/icons/sortamountdown/index.vue
index c3a77f3fb..835874a68 100644
--- a/components/lib/icons/sortamountdown/index.vue
+++ b/components/lib/icons/sortamountdown/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_378_15544)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 d="M2.59836 13.2009C2.44634 13.2009 2.29432 13.1449 2.1743 13.0248L0.174024 11.0246C-0.0580081 10.7925 -0.0580081 10.4085 0.174024 10.1764C0.406057 9.94441 0.79011 9.94441 1.02214 10.1764L2.59836 11.7527L4.17458 10.1764C4.40662 9.94441 4.79067 9.94441 5.0227 10.1764C5.25473 10.4085 5.25473 10.7925 5.0227 11.0246L3.02242 13.0248C2.90241 13.1449 2.75038 13.2009 2.59836 13.2009Z"
                 fill="currentColor"
@@ -27,17 +27,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_378_15544">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SortAmountDownIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/sortamountupalt/index.vue b/components/lib/icons/sortamountupalt/index.vue
index 9de4e46c0..0f5ccb7e4 100644
--- a/components/lib/icons/sortamountupalt/index.vue
+++ b/components/lib/icons/sortamountupalt/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_378_15578)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 d="M4.59864 3.99958C4.44662 3.99958 4.2946 3.94357 4.17458 3.82356L2.59836 2.24734L1.02214 3.82356C0.79011 4.05559 0.406057 4.05559 0.174024 3.82356C-0.0580081 3.59152 -0.0580081 3.20747 0.174024 2.97544L2.1743 0.97516C2.40634 0.743127 2.79039 0.743127 3.02242 0.97516L5.0227 2.97544C5.25473 3.20747 5.25473 3.59152 5.0227 3.82356C4.90268 3.94357 4.75066 3.99958 4.59864 3.99958Z"
                 fill="currentColor"
@@ -27,17 +27,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_378_15578">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SortAmountUpAltIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/spinner/index.vue b/components/lib/icons/spinner/index.vue
index b4cf0b6b2..4743fff8a 100644
--- a/components/lib/icons/spinner/index.vue
+++ b/components/lib/icons/spinner/index.vue
@@ -1,23 +1,30 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_417_21408)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 d="M6.99701 14C5.85441 13.999 4.72939 13.7186 3.72012 13.1832C2.71084 12.6478 1.84795 11.8737 1.20673 10.9284C0.565504 9.98305 0.165424 8.89526 0.041387 7.75989C-0.0826496 6.62453 0.073125 5.47607 0.495122 4.4147C0.917119 3.35333 1.59252 2.4113 2.46241 1.67077C3.33229 0.930247 4.37024 0.413729 5.4857 0.166275C6.60117 -0.0811796 7.76026 -0.0520535 8.86188 0.251112C9.9635 0.554278 10.9742 1.12227 11.8057 1.90555C11.915 2.01493 11.9764 2.16319 11.9764 2.31778C11.9764 2.47236 11.915 2.62062 11.8057 2.73C11.7521 2.78503 11.688 2.82877 11.6171 2.85864C11.5463 2.8885 11.4702 2.90389 11.3933 2.90389C11.3165 2.90389 11.2404 2.8885 11.1695 2.85864C11.0987 2.82877 11.0346 2.78503 10.9809 2.73C9.9998 1.81273 8.73246 1.26138 7.39226 1.16876C6.05206 1.07615 4.72086 1.44794 3.62279 2.22152C2.52471 2.99511 1.72683 4.12325 1.36345 5.41602C1.00008 6.70879 1.09342 8.08723 1.62775 9.31926C2.16209 10.5513 3.10478 11.5617 4.29713 12.1803C5.48947 12.7989 6.85865 12.988 8.17414 12.7157C9.48963 12.4435 10.6711 11.7264 11.5196 10.6854C12.3681 9.64432 12.8319 8.34282 12.8328 7C12.8328 6.84529 12.8943 6.69692 13.0038 6.58752C13.1132 6.47812 13.2616 6.41667 13.4164 6.41667C13.5712 6.41667 13.7196 6.47812 13.8291 6.58752C13.9385 6.69692 14 6.84529 14 7C14 8.85651 13.2622 10.637 11.9489 11.9497C10.6356 13.2625 8.85432 14 6.99701 14Z"
                 fill="currentColor"
             />
         </g>
         <defs>
-            <clipPath id="clip0_417_21408">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SpinnerIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/star/index.vue b/components/lib/icons/star/index.vue
index dc9c6fbe3..501719e7f 100644
--- a/components/lib/icons/star/index.vue
+++ b/components/lib/icons/star/index.vue
@@ -1,23 +1,30 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_288_11830)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 d="M10.9741 13.6721C10.8806 13.6719 10.7886 13.6483 10.7066 13.6033L7.00002 11.6545L3.29345 13.6033C3.19926 13.6539 3.09281 13.6771 2.98612 13.6703C2.87943 13.6636 2.77676 13.6271 2.6897 13.5651C2.60277 13.5014 2.53529 13.4147 2.4948 13.3148C2.45431 13.215 2.44241 13.1058 2.46042 12.9995L3.17881 8.87264L0.167699 5.95324C0.0922333 5.8777 0.039368 5.78258 0.0150625 5.67861C-0.00924303 5.57463 -0.00402231 5.46594 0.030136 5.36477C0.0621323 5.26323 0.122141 5.17278 0.203259 5.10383C0.284377 5.03488 0.383311 4.99023 0.488681 4.97501L4.63087 4.37126L6.48797 0.618832C6.54083 0.530159 6.61581 0.456732 6.70556 0.405741C6.79532 0.35475 6.89678 0.327942 7.00002 0.327942C7.10325 0.327942 7.20471 0.35475 7.29447 0.405741C7.38422 0.456732 7.4592 0.530159 7.51206 0.618832L9.36916 4.37126L13.5114 4.97501C13.6167 4.99023 13.7157 5.03488 13.7968 5.10383C13.8779 5.17278 13.9379 5.26323 13.9699 5.36477C14.0041 5.46594 14.0093 5.57463 13.985 5.67861C13.9607 5.78258 13.9078 5.8777 13.8323 5.95324L10.8212 8.87264L11.532 12.9995C11.55 13.1058 11.5381 13.215 11.4976 13.3148C11.4571 13.4147 11.3896 13.5014 11.3027 13.5651C11.2059 13.632 11.0917 13.6692 10.9741 13.6721ZM7.00002 10.4393C7.09251 10.4404 7.18371 10.4613 7.2675 10.5005L10.2098 12.029L9.65193 8.75036C9.6368 8.6584 9.64343 8.56418 9.6713 8.47526C9.69918 8.38633 9.74751 8.30518 9.81242 8.23832L12.1969 5.94559L8.90298 5.45648C8.81188 5.44198 8.72555 5.406 8.65113 5.35152C8.57671 5.29703 8.51633 5.2256 8.475 5.14314L7.00002 2.1626L5.52503 5.15078C5.4837 5.23324 5.42332 5.30467 5.3489 5.35916C5.27448 5.41365 5.18815 5.44963 5.09705 5.46412L1.80318 5.94559L4.18761 8.23832C4.25252 8.30518 4.30085 8.38633 4.32873 8.47526C4.3566 8.56418 4.36323 8.6584 4.3481 8.75036L3.7902 12.0519L6.73253 10.5234C6.81451 10.4762 6.9058 10.4475 7.00002 10.4393Z"
                 fill="currentColor"
             />
         </g>
         <defs>
-            <clipPath id="clip0_288_11830">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'StarIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/starfill/index.vue b/components/lib/icons/starfill/index.vue
index 21237e106..939063761 100644
--- a/components/lib/icons/starfill/index.vue
+++ b/components/lib/icons/starfill/index.vue
@@ -1,23 +1,30 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_288_11823)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 d="M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z"
                 fill="currentColor"
             />
         </g>
         <defs>
-            <clipPath id="clip0_288_11823">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'StarFillIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/thlarge/index.vue b/components/lib/icons/thlarge/index.vue
index 1fba5a236..44d974087 100644
--- a/components/lib/icons/thlarge/index.vue
+++ b/components/lib/icons/thlarge/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_397_19940)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_397_19940">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ThLargeIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/timescircle/index.vue b/components/lib/icons/timescircle/index.vue
index 623dca503..c66378fa5 100644
--- a/components/lib/icons/timescircle/index.vue
+++ b/components/lib/icons/timescircle/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_334_13179)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_334_13179">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'TimesCircleIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/trash/index.vue b/components/lib/icons/trash/index.vue
index b399f7f17..bf4bc6b91 100644
--- a/components/lib/icons/trash/index.vue
+++ b/components/lib/icons/trash/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_417_21589)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_417_21589">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'TrashIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/undo/index.vue b/components/lib/icons/undo/index.vue
index 298d3346b..f38d0dedf 100644
--- a/components/lib/icons/undo/index.vue
+++ b/components/lib/icons/undo/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_417_21625)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_417_21625">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'UndoIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/upload/index.vue b/components/lib/icons/upload/index.vue
index 0f19341b4..546eb74e8 100644
--- a/components/lib/icons/upload/index.vue
+++ b/components/lib/icons/upload/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_414_21072)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_414_21072">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'UploadIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/windowmaximize/index.vue b/components/lib/icons/windowmaximize/index.vue
index db05262f8..59cc74bfd 100644
--- a/components/lib/icons/windowmaximize/index.vue
+++ b/components/lib/icons/windowmaximize/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_414_20927)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_414_20927">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'WindowMaximizeIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/windowminimize/index.vue b/components/lib/icons/windowminimize/index.vue
index eabc70328..32e0b2ca1 100644
--- a/components/lib/icons/windowminimize/index.vue
+++ b/components/lib/icons/windowminimize/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_414_20939)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_414_20939">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'WindowMinimizeIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>