Can I choose which AntD icon to use with allowClear = true?

user_252065 0
Viewed 2596

If I pass allowClear={true} to an AntD Input component, a small circle with an × appears at the end of the field once a user has typed something, which can be clicked to empty the contents of the field.

Is there some way to instruct AntD to use a different icon?

The AntD docs for reference: Input with Clear Icon

enter image description here

antd reactjs javascript
2 Answers

For current version 3.19.8 you can't.

The closest clean solution will be using Input.Group with revealing clear button on typing.

enter image description here

<Input.Group compact>
  <Input
    style={{ width: "80%" }}
    onChange={e => setValue(e.target.value)}
    value={value}
  />
  {value && <Button onClick={reset} type="danger" icon="delete" />}
</Input.Group>;

Note: Should add animation on button reveal.

Edit Q-56777640-Input-icon

user_78824700

Yes, you can by passing prop to allowClear:

<Input 
 allowClear={{ clearIcon: <CloseOutlined /> }}
/>
user_138987730
Related