How to place two icons in a button

I am trying to place two icons one is related to wordDocument and other is related to download icon on and button but one icon is overriding another icon, this is the code:

import { FileWordOutlined, DownloadOutlined } from '@ant-design/icons';

return (
<Fragment>
  <Button
    type="primary"
    style={{ width: '30%' }}
    onClick={() => {
      authProvider.getIdToken().then(token => {
        downloadFile(
          `${process.env.REACT_APP_API_URL}/api/Projects/${projectNumber}`,
          token.idToken.rawIdToken
        );
      });
    }}
    icon={((<FileWordOutlined />), (<DownloadOutlined />))}
    size="small"
  >
    Basis of Design
  </Button>
</Fragment>
);

and the button image is looking like this right now

I am looking to place icon <FileWordOutlined /> on the right side of the text Basis of Design and <DownloadOutlined /> is on the left side of the text.

Could anyone please let me know is there any way to achieve this?

Solution

The icon props take only one component. So you won't be able to pass two-component there.

There are two ways to get 2 icons.

Remove the icon prop and use the 2 icon Component,for ex,<FileWordOutlined />, <DownloadOutlined /> as children to the Button prop.
```
<Button type="primary">
<FileWordOutlined />
  Basis of Design
<DownloadOutlined />
</Button>
```

If you want to use the icon prop you use it like this:

<Button
type="primary"
icon={<FileWordOutlined />}
size="small"
>
 Basis of Design
 <DownloadOutlined />
</Button>