Dropdown & MultiSelect: Inconsistent SVG custom icon behaviour

[gofford]

Describe the bug

Dropdown and MultiSelect both have support for custom icons:

• Dropdown: dropdownIcon, clearIcon
• MultiSelect: dropdownIcon, removeIcon (should probably have clearIcon as well: #4073).

But the behaviour is unexpected. Adding a custom SVG icon component from (for example) react-icons or fortawesome loses the on-click behaviour of the default button. The position of the button can also change. See Reproducer for live examples.

Is this expected? Or am I using this feature incorrectly? I can't find any documentation or examples on using these features, and there are no examples available in the documentation.

Reproducer

https://codesandbox.io/s/primereact-test-forked-8uo22u?file=/src/index.js

PrimeReact version

9.1.1

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

Add an SVG icon as a custom icon to Dropdown or MultiSelect

Expected behavior

When adding a custom icon via SVG I would expect that icon to behave in the same way; i.e., the removeIcon should remove the chip, and the clearIcon should clear the selected contents.

The custom icons should also have the same positioning as the original one too: if the default clearIcon is centred vertically then the custom one should be too.

[melloware]

I am not positive but I think my fix here for SVG might actually fix this issue: https://github.com/primefaces/primereact/pull/3957

I will have to test it.

[melloware]

Can you try 9.3.0 as SVG icons have been added now: https://primereact.org/customicons/