HelpBot Assistant

How can I help you?

Icons in React Message component

20 Feb 202624 minutes to read

The Message component supports configurable icon display options, including severity icons (which visually communicate message type) and close icons (which enable message dismissal). This guide covers disabling severity icons, customizing icon appearance, and managing close icon visibility.

Severity icons

By default, the Message component displays severity icons that correspond to the message severity type, enhancing visual communication beyond text alone. To hide these severity icons, set the showIcon property to false.

The following example shows messages with severity icons disabled using the showIcon property.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
function App() {
    return (<div className="msg-default-section">
        <div className="content-section">
            <MessageComponent id="msg_default" content="Editing is restricted" showIcon={false}></MessageComponent>
            <MessageComponent id="msg_info" content="Please read the comments carefully" severity="Info" showIcon={false}></MessageComponent>
            <MessageComponent id="msg_success" content="Your message has been sent successfully" severity="Success" showIcon={false}></MessageComponent>
            <MessageComponent id="msg_warning" content="There was a problem with your network connection" severity="Warning" showIcon={false}></MessageComponent>
            <MessageComponent id="msg_error" content="A problem occurred while submitting your data" severity="Error" showIcon={false}></MessageComponent>
        </div>
    </div>);
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';

function App() {
  return (
    <div className="msg-default-section">
        <div className="content-section">
            <MessageComponent id="msg_default" content="Editing is restricted" showIcon={false}></MessageComponent>
            <MessageComponent id="msg_info" content="Please read the comments carefully" severity="Info" showIcon={false}></MessageComponent>
            <MessageComponent id="msg_success" content="Your message has been sent successfully" severity="Success" showIcon={false}></MessageComponent>
            <MessageComponent id="msg_warning" content="There was a problem with your network connection" severity="Warning" showIcon={false}></MessageComponent>
            <MessageComponent id="msg_error" content="A problem occurred while submitting your data" severity="Error" showIcon={false}></MessageComponent>
        </div>
    </div>
  );
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Message</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-notifications/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
    <style>
        /* Sample level styles */
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .msg-default-section .content-section {
            margin: 0 auto;
            max-width: 450px;
            padding-top: 10px;
        }

        .msg-default-section .e-message {
            margin: 10px 0;
        }
    </style>
</body>

</html>

Custom severity icons

Customize the default severity icons by applying CSS overrides through the cssClass property. This allows you to replace default icons with custom icon fonts or images that match your application’s design system.

The following example shows how to apply custom severity icons using CSS styling.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
function App() {
    return (<div className="msg-custom-section">
        <div className="content-section">
            <MessageComponent id="msg_icon" cssClass="custom">Essential JS 2 is a modern JavaScript UI Controls library that has
            been built from the ground up to be lightweight, responsive, modular and touch friendly. It is written in TypeScript and has no
            external dependencies. It also includes complete support for Angular, React, Vue, ASP.NET MVC and ASP.NET Core frameworks.</MessageComponent>
        </div>
    </div>);
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';

function App() {
  return (
      <div className="msg-custom-section">
        <div className="content-section">
            <MessageComponent id="msg_icon" cssClass="custom">Essential JS 2 is a modern JavaScript UI Controls library that has
            been built from the ground up to be lightweight, responsive, modular and touch friendly. It is written in TypeScript and has no
            external dependencies. It also includes complete support for Angular, React, Vue, ASP.NET MVC and ASP.NET Core frameworks.</MessageComponent>
        </div>
    </div>
  );
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Message</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-notifications/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
    <style>
        /* Sample level styles */
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .msg-custom-section .content-section {
            margin: 0 auto;
            max-width: 400px;
            padding-top: 10px;
        }

        .msg-custom-section .e-message {
            margin: 10px 0;
        }

        @font-face {
            font-family: 'Message_icons';
            src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        .custom.e-message .e-msg-icon::before {
            font-family: 'Message_icons';
            content: '\e894';
        }
    </style>
</body>

</html>

Close icon

The Message component can display a close icon that allows users to dismiss the message via mouse click or keyboard interaction. By default, the close icon is not displayed. To enable the close icon, set the showCloseIcon property to true.

The following example demonstrates messages rendered with the close icon enabled.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { useState } from 'react';

function App() {
    const [defaultVisible, setDefaultVisible] = useState(true);
    const [defaultCssClass, setDefaultCssClass] = useState('e-outline e-primary msg-hidden');
    const [infoVisible, setInfoVisible] = useState(true);
    const [infoCssClass, setinfoCssClass] = useState('e-outline e-primary e-info msg-hidden');
    const [successVisible, setSuccessVisible] = useState(true);
    const [successCssClass, setSuccessCssClass] = useState('e-outline e-primary e-success msg-hidden');
    const [warningVisible, setWarningVisible] = useState(true);
    const [warningCssClass, setWarningCssClass] = useState('e-outline e-primary e-warning msg-hidden');
    const [errorVisible, setErrorVisible] = useState(true);
    const [errorCssClass, setErrorCssClass] = useState('e-outline e-primary e-error msg-hidden');
    const [showIcon, setShowIcon] = useState(true);
    const [showCloseIcon, setShowCloseIcon] = useState(true);

    const defaultClick = () => {
        setDefaultVisible(true);
        setDefaultCssClass('e-outline e-primary msg-hidden');
    };
    const defaultClosed = () => {
        setDefaultVisible(false);
        setDefaultCssClass('e-outline e-primary');
    };
    const infoClick = () => {
        setInfoVisible(true);
        setinfoCssClass('e-outline e-primary e-info msg-hidden');
    };
    const infoClosed = () => {
        setInfoVisible(false);
        setinfoCssClass('e-outline e-primary e-info');
    };
    const successClick = () => {
        setSuccessVisible(true);
        setSuccessCssClass('e-outline e-primary e-success msg-hidden');
    };
    const successClosed = () => {
        setSuccessVisible(false);
        setSuccessCssClass('e-outline e-primary e-success');
    };
    const warningClick = () => {
        setWarningVisible(true);
        setWarningCssClass('e-outline e-primary e-warning msg-hidden');
    };
    const warningClosed = () => {
        setWarningVisible(false);
        setWarningCssClass('e-outline e-primary e-warning');
    };
    const errorClick = () => {
        setErrorVisible(true);
        setErrorCssClass('e-outline e-primary e-error msg-hidden');
    };
    const errorClosed = () => {
        setErrorVisible(false);
        setErrorCssClass('e-outline e-primary e-warning');
    };
    return (<div className="msg-icon-section">
        <div className="content-section">
        <ButtonComponent id="btn1" content="Show Default Message" cssClass={defaultCssClass} onClick={defaultClick.bind(this)} />
            <MessageComponent id="msg_default_icon" visible={defaultVisible} showCloseIcon={showCloseIcon} closed={defaultClosed.bind(this)} showIcon={showIcon}>Editing is restricted</MessageComponent>
            <ButtonComponent id="btn2" content="Show Info Message" cssClass={infoCssClass} onClick={infoClick.bind(this)} />
            <MessageComponent id="msg_info_icon" severity="Info" showCloseIcon={showCloseIcon} visible={infoVisible} closed={infoClosed.bind(this)} showIcon={showIcon}>Please read the comments carefully</MessageComponent>
            <ButtonComponent id="btn3" content="Show Success Message" cssClass={successCssClass} onClick={successClick.bind(this)} />
            <MessageComponent id="msg_success_icon" severity="Success" showCloseIcon={showCloseIcon} closed={successClosed.bind(this)} visible={successVisible} showIcon={showIcon}>Your message has been sent successfully</MessageComponent>
            <ButtonComponent id="btn4" content="Show Warning Message" cssClass={warningCssClass} onClick={warningClick.bind(this)} />
            <MessageComponent id="msg_warning_icon" severity="Warning" showCloseIcon={showCloseIcon} closed={warningClosed.bind(this)} visible={warningVisible} showIcon={showIcon}>There was a problem with your network connection</MessageComponent>
            <ButtonComponent id="btn5" content="Show Error Message" cssClass={errorCssClass} onClick={errorClick.bind(this)} />
            <MessageComponent id="msg_error_icon" severity="Error" showCloseIcon={showCloseIcon} closed={errorClosed.bind(this)} visible={errorVisible} showIcon={showIcon}>A problem occurred while submitting your data</MessageComponent>
        </div>
    </div>);
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { useState } from 'react';

function App() {
    const [defaultVisible, setDefaultVisible] = useState<boolean>(true);
    const [defaultCssClass, setDefaultCssClass] = useState<string>('e-outline e-primary msg-hidden');
    const [infoVisible, setInfoVisible] = useState<boolean>(true);
    const [infoCssClass, setinfoCssClass] = useState<string>('e-outline e-primary e-info msg-hidden');
    const [successVisible, setSuccessVisible] = useState<boolean>(true);
    const [successCssClass, setSuccessCssClass] = useState<string>('e-outline e-primary e-success msg-hidden');
    const [warningVisible, setWarningVisible] = useState<boolean>(true);
    const [warningCssClass, setWarningCssClass] = useState<string>('e-outline e-primary e-warning msg-hidden');
    const [errorVisible, setErrorVisible] = useState<boolean>(true);
    const [errorCssClass, setErrorCssClass] = useState<string>('e-outline e-primary e-error msg-hidden');
    const [showIcon, setShowIcon] = useState<boolean>(true);
    const [showCloseIcon, setShowCloseIcon] = useState<boolean>(true);

    const defaultClick = () => {
        setDefaultVisible(true);
        setDefaultCssClass('e-outline e-primary msg-hidden');
    };
    const defaultClosed = () => {
        setDefaultVisible(false);
        setDefaultCssClass('e-outline e-primary');
    };
    const infoClick = () => {
        setInfoVisible(true);
        setinfoCssClass('e-outline e-primary e-info msg-hidden');
    };
    const infoClosed = () => {
        setInfoVisible(false);
        setinfoCssClass('e-outline e-primary e-info');
    };
    const successClick = () => {
        setSuccessVisible(true);
        setSuccessCssClass('e-outline e-primary e-success msg-hidden');
    };
    const successClosed = () => {
        setSuccessVisible(false);
        setSuccessCssClass('e-outline e-primary e-success');
    };
    const warningClick = () => {
        setWarningVisible(true);
        setWarningCssClass('e-outline e-primary e-warning msg-hidden');
    };
    const warningClosed = () => {
        setWarningVisible(false);
        setWarningCssClass('e-outline e-primary e-warning');
    };
    const errorClick = () => {
        setErrorVisible(true);
        setErrorCssClass('e-outline e-primary e-error msg-hidden');
    };
    const errorClosed = () => {
        setErrorVisible(false);
        setErrorCssClass('e-outline e-primary e-warning');
    };

  return (
      <div className="msg-icon-section">
        <div className="content-section">
            <ButtonComponent id="btn1" content="Show Default Message" cssClass={defaultCssClass} onClick={defaultClick.bind(this)} />
            <MessageComponent id="msg_default_icon" visible={defaultVisible} showCloseIcon={showCloseIcon} closed={defaultClosed.bind(this)} showIcon={showIcon}>Editing is restricted</MessageComponent>
            <ButtonComponent id="btn2" content="Show Info Message" cssClass={infoCssClass} onClick={infoClick.bind(this)} />
            <MessageComponent id="msg_info_icon" severity="Info" showCloseIcon={showCloseIcon} visible={infoVisible} closed={infoClosed.bind(this)} showIcon={showIcon}>Please read the comments carefully</MessageComponent>
            <ButtonComponent id="btn3" content="Show Success Message" cssClass={successCssClass} onClick={successClick.bind(this)} />
            <MessageComponent id="msg_success_icon" severity="Success" showCloseIcon={showCloseIcon} closed={successClosed.bind(this)} visible={successVisible} showIcon={showIcon}>Your message has been sent successfully</MessageComponent>
            <ButtonComponent id="btn4" content="Show Warning Message" cssClass={warningCssClass} onClick={warningClick.bind(this)} />
            <MessageComponent id="msg_warning_icon" severity="Warning" showCloseIcon={showCloseIcon} closed={warningClosed.bind(this)} visible={warningVisible} showIcon={showIcon}>There was a problem with your network connection</MessageComponent>
            <ButtonComponent id="btn5" content="Show Error Message" cssClass={errorCssClass} onClick={errorClick.bind(this)} />
            <MessageComponent id="msg_error_icon" severity="Error" showCloseIcon={showCloseIcon} closed={errorClosed.bind(this)} visible={errorVisible} showIcon={showIcon}>A problem occurred while submitting your data</MessageComponent>
        </div>
    </div>
  );
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Message</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-notifications/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
    <style>
        /* Sample level styles */
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .msg-icon-section .content-section {
            margin: 0 auto;
            max-width: 450px;
            padding-top: 10px;
        }

        .msg-icon-section .e-message {
            margin: 10px 0;
        }

        .msg-icon-section .e-btn {
            display: block;
            margin: 10px 0;
        }

        .msg-icon-section .e-btn.msg-hidden {
            display: none;
        }
    </style>
</body>

</html>