From 83c93fcae8f40596481f7f5eb0fe8010b4877530 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Kleszczy=C5=84ski?=
 <michalkamilkleszczynski@gmail.com>
Date: Thu, 29 Sep 2022 17:42:33 +0200
Subject: [PATCH] Add custom icons support for the Chips component

---
 api-generator/components/chips.js  |  6 ++++++
 src/components/chips/Chips.d.ts    |  5 +++++
 src/components/chips/Chips.spec.js | 11 +++++++++++
 src/components/chips/Chips.vue     |  6 +++++-
 src/views/chips/ChipsDoc.vue       |  6 ++++++
 5 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/api-generator/components/chips.js b/api-generator/components/chips.js
index c7f92d12ce..f250c3edbc 100644
--- a/api-generator/components/chips.js
+++ b/api-generator/components/chips.js
@@ -64,6 +64,12 @@ const ChipsProps = [
         type: 'object',
         default: 'null',
         description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'removeTokenIcon',
+        type: 'string',
+        default: 'pi pi-times-circle',
+        description: 'Icon to display in chip remove action.'
     }
 ];
 
diff --git a/src/components/chips/Chips.d.ts b/src/components/chips/Chips.d.ts
index 6f5a9968bb..3389df2da5 100755
--- a/src/components/chips/Chips.d.ts
+++ b/src/components/chips/Chips.d.ts
@@ -55,6 +55,11 @@ export interface ChipsProps {
      * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
      */
     inputProps?: InputHTMLAttributes | undefined;
+    /**
+     * Icon to display in chip remove action.
+     * Default value is 'pi pi-times-circle'.
+     */
+    removeTokenIcon?: string | undefined;
     /**
      * When present, it specifies that the element should be disabled.
      */
diff --git a/src/components/chips/Chips.spec.js b/src/components/chips/Chips.spec.js
index 70ed685b2f..821d701a14 100644
--- a/src/components/chips/Chips.spec.js
+++ b/src/components/chips/Chips.spec.js
@@ -30,4 +30,15 @@ describe('Chips.vue', () => {
         expect(wrapper.find('.p-chips-token-label').exists()).toBe(true);
         expect(wrapper.find('.p-chips-token-label').text()).toBe('PrimeVue');
     });
+
+    it('should have correct custom chip removal icon', async () => {
+        await wrapper.setProps({
+            modelValue: ['foo', 'bar'],
+            removeTokenIcon: 'pi pi-discord'
+        });
+
+        const icon = wrapper.find('.p-chips-token-icon');
+
+        expect(icon.classes()).toContain('pi-discord');
+    });
 });
diff --git a/src/components/chips/Chips.vue b/src/components/chips/Chips.vue
index a3ff0c751f..c1a5e5423a 100755
--- a/src/components/chips/Chips.vue
+++ b/src/components/chips/Chips.vue
@@ -28,7 +28,7 @@
                 <slot name="chip" :value="val">
                     <span class="p-chips-token-label">{{ val }}</span>
                 </slot>
-                <span class="p-chips-token-icon pi pi-times-circle" @click="removeItem($event, i)" aria-hidden="true"></span>
+                <span :class="['p-chips-token-icon', removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true"></span>
             </li>
             <li class="p-chips-input-token" role="option">
                 <input
@@ -102,6 +102,10 @@ export default {
             type: null,
             default: null
         },
+        removeTokenIcon: {
+            type: String,
+            default: 'pi pi-times-circle'
+        },
         'aria-labelledby': {
             type: String,
             default: null
diff --git a/src/views/chips/ChipsDoc.vue b/src/views/chips/ChipsDoc.vue
index 82d21a2ec0..ff1f6264ce 100755
--- a/src/views/chips/ChipsDoc.vue
+++ b/src/views/chips/ChipsDoc.vue
@@ -113,6 +113,12 @@ import Chips from 'primevue/chips';
                         <td>null</td>
                         <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
                     </tr>
+                    <tr>
+                        <td>removeTokenIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times-circle</td>
+                        <td>Icon to display in chip remove action.</td>
+                    </tr>
                 </tbody>
             </table>
         </div>