Add custom icons support for the Chips component

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.'
     }
 ];
 

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.
      */

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');
+    });
 });

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

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>