trying to place two icons in button

user_899271 0
Viewed 2618

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 related to that

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

enter image description here

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?

Thanks in advance!!!!

antd reactjs icons css javascript
3 Answers

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

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

user_75137180 
If you want to get 2 icons
 Then create icon prop like this:
<Button icon={your primary icon}>
    {text}
    {extra icon}
</Button>

So the Element would look like
<My Button 
    icon={<icon name/>}
    text={text}
    extra icon={<extra icon name/>}
/>
user_101476050
Related