How to make ant design button with icon in react js?

Solution

To make ant design button with icon in react js, first, install ant design library using npm install antd command import and use button component from it. And put the icon in button icon attribute. Then it will show an icon on the left side a button.

Snippet

In this snippet, see the short example to use the button component of ant design library. with the use of this code icon={<StepBackwardOutlined />} make button with an icon.

<Button type="primary" icon={<StepBackwardOutlined />} >
StepBackwardOutlined
</Button> 

Example

In this example, we will import the Button component from the Ant library. Use this code icon = {<StepBackwardOutlined />}. We have created a button with an icon in ant design.

Let’s start coding…

App.js

import { StepBackwardOutlined } from '@ant-design/icons';
import { Button } from 'antd';

const App = () => (
      <Button type="primary" icon={<StepBackwardOutlined />} >
        StepBackwardOutlined
      </Button> 
  );
export default App;

Output

Links

Here, we are provided code sandbox links for the above program make ant design button with icon. Then you can use whenever you went and do the changes as per your requirements.

codesandbox

Happy Coding,

I hope the above example with help you to do your task.