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 @@