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

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

Answer

For current version 3.19.8 you can’t.

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

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