How to place two icons in a button

Question

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?

Answer 1

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.

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

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

Answer 2

What you are doing isn't working because you are setting icon to the returned value of ((<FileWordOutlined />), (<DownloadOutlined />)), which is <DownloadOutlined />.

You can omit icon and put the icons and the button text inside Button instead:

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

demo