Add leading icon and trailing button support to <Input/>

[sebald]

Description

It should be possible to add an icon to an input field to support its usage. This is especially helpful for search field, for example. The leading icon should only be a visual aid and has not functionality besides clicking of it should also focus the input.

For more complex fields, like a date picker input fields need to have the option to display a trailing icon (button). The trailing icon button is interaction and will have user interaction.

This is an image from Material Design to visualize the anatomy of an input with leading and trailing icons:

Proposal

We could either extend the existing <Input/> with additional props, or we could create a dedicated component that is composable.

<Input
  leading={<SearchIcon />}
  trailing={
    <Button>
      <XIcon />
    </Button>
  }
/>

<InputContainer>
  <SearchIcon />
  <Input variant="clear" />
  <Button>
    <XIcon />
  </Button>
</InputContainer>