Solution
To add a custom icon in the ant design alert in react js, use the icon
attribute and pass your desired icon in the attribute the alert component will show in the UI.
Make sure you have added showIcon={true}
in your alert component.
Snippet
In this snippet, see the short example of use alert
component with icon from ant design library.
<Alert message="Success Text" type="success" showIcon icon={<CheckOutlined />} style={{
margin: '30px',
}}/>
Example
In this example, we will import the alert
component from the antd
library, use the icon
component in the alert
icon attribute, and provide attribute details to add a custom icon appearance.
Let’s start coding…
App.js
import * as React from 'react';
import { Alert } from 'antd';
import { CheckOutlined } from "@ant-design/icons";
export default function ComboBox() {
return (
<Alert message="Success Text" type="success" showIcon icon={<CheckOutlined />} style={{
margin: '30px',
}}/>
);
}
Output
Links
Here, we are provided code sandbox links for the above program add custom icon in ant design alert. Then you can use whenever you went and do the changes as per your requirements.
Happy Coding,
I hope the above example with help you to do your task.