Icons in Vue Message component

11 Jun 202419 minutes to read

This section explains the message with no icons, how to show or hide the close icon and add the custom severity icon to the message.

No Icon

By default, severity icons can be displayed according to the severity types to make it more understandable to the user by visual information rather than text. To hide the severity icons, set the showIcon property to false.

The following example demonstrates the different severity messages without the severity icons.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="msg-default-section">
    <div class="content-section">
      <ejs-message id="msg_default" content="Editing is restricted" :showIcon="showIcon"></ejs-message>
      <ejs-message id="msg_info" content="Please read the comments carefully" severity="Info" :showIcon="showIcon"></ejs-message>
      <ejs-message id="msg_success" content="Your message has been sent successfully" severity="Success" :showIcon="showIcon"></ejs-message>
      <ejs-message id="msg_warning" content="There was a problem with your network connection" severity="Warning" :showIcon="showIcon"></ejs-message>
      <ejs-message id="msg_error" content="A problem occurred while submitting your data" severity="Error" :showIcon="showIcon"></ejs-message>
    </div>
  </div>
</template>
<script setup>
import { MessageComponent as EjsMessage } from "@syncfusion/ej2-vue-notifications";

const showIcon = true;
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/message/material.css";

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

  .msg-default-section .e-message {
    margin: 10px 0;
  }
</style>
<template>
  <div class="msg-default-section">
    <div class="content-section">
      <ejs-message id="msg_default" content="Editing is restricted" :showIcon="showIcon"></ejs-message>
      <ejs-message id="msg_info" content="Please read the comments carefully" severity="Info" :showIcon="showIcon"></ejs-message>
      <ejs-message id="msg_success" content="Your message has been sent successfully" severity="Success" :showIcon="showIcon"></ejs-message>
      <ejs-message id="msg_warning" content="There was a problem with your network connection" severity="Warning" :showIcon="showIcon"></ejs-message>
      <ejs-message id="msg_error" content="A problem occurred while submitting your data" severity="Error" :showIcon="showIcon"></ejs-message>
    </div>
  </div>
</template>
<script>
import { MessageComponent } from "@syncfusion/ej2-vue-notifications";

export default {
  name: "App",
  components: {
    "ejs-message": MessageComponent
  },
  data: function() {
    return {
      showIcon: true
    };
  }
};
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/message/material.css";

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

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

Custom Icon

By default, the severity icons can be displayed according to the severity type to make it more understandable to the user by visual information rather than text. If the user wants to customize these icons, it can be achieved through the cssClass property.

The following example demonstrates how the default message is rendered with a custom severity icon.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="col-lg-12 control-section msg-custom-section">
    <div class="content-section">
      <ejs-message 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.
      </ejs-message>
    </div>
  </div>
</template>
<script setup>
import { MessageComponent as EjsMessage } from "@syncfusion/ej2-vue-notifications";

</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/message/material.css";

  .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>
<template>
  <div class="col-lg-12 control-section msg-custom-section">
    <div class="content-section">
      <ejs-message 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.
      </ejs-message>
    </div>
  </div>
</template>
<script setup>
import { MessageComponent } from "@syncfusion/ej2-vue-notifications";

</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/message/material.css";

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

Close Icon

The message can be rendered with or without the close icon. The close icon is used to hide the message, either by manually clicking the close icon or through keyboard interaction.

By default, the close icon is not rendered in the message. To show the close icon, set the showCloseIcon property to true.

In the following example, the messages are rendered with the close icon.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="col-lg-8 control-section msg-icon-section">
    <div class="content-section">
      <ejs-button id="btn1" ref="defaultBtn" content="Show Default Message" cssClass="e-outline e-primary msg-hidden"
        v-on:click="defaultClick"></ejs-button>
      <ejs-message id="msg_default_icon" ref="msgDefault" :showCloseIcon="showCloseIcon" :closed="defaultClosed">Editing
        is restricted</ejs-message>
      <ejs-button id="btn2" ref="infoBtn" content="Show Info Message" cssClass="e-outline e-primary e-info msg-hidden"
        v-on:click="infoClick"></ejs-button>
      <ejs-message id="msg_info_icon" ref="msgInfo" severity="Info" :showCloseIcon="showCloseIcon"
        :closed="infoClosed">Please read the comments carefully</ejs-message>
      <ejs-button id="btn3" ref="successBtn" content="Show Success Message"
        cssClass="e-outline e-primary e-success msg-hidden" v-on:click="successClick"></ejs-button>
      <ejs-message id="msg_success_icon" ref="msgSuccess" severity="Success" :showCloseIcon="showCloseIcon"
        :closed="successClosed">Your message has been sent successfully</ejs-message>
      <ejs-button id="btn4" ref="warningBtn" content="Show Warning Message"
        cssClass="e-outline e-primary e-warning msg-hidden" v-on:click="warningClick"></ejs-button>
      <ejs-message id="msg_warning_icon" ref="msgWarning" severity="Warning" :showCloseIcon="showCloseIcon"
        :closed="warningClosed">There was a problem with your network connection</ejs-message>
      <ejs-button id="btn5" ref="errorBtn" content="Show Error Message" cssClass="e-outline e-primary e-error msg-hidden"
        v-on:click="errorClick"></ejs-button>
      <ejs-message id="msg_error_icon" ref="msgError" severity="Error" :showCloseIcon="showCloseIcon"
        :closed="errorClosed">A problem has been occurred while submitting your data</ejs-message>
    </div>
  </div>
</template>
<script setup>
import { MessageComponent as EjsMessage } from "@syncfusion/ej2-vue-notifications";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";

const showCloseIcon = true;
const defaultClick = function () {
  show(this.$refs.msgDefault, this.$refs.defaultBtn);
}
const infoClick = function () {
  show(this.$refs.msgInfo, this.$refs.infoBtn);
}
const successClick = function () {
  show(this.$refs.msgSuccess, this.$refs.successBtn);
}
const warningClick = function () {
  show(this.$refs.msgWarning, this.$refs.warningBtn);
}
const errorClick = function () {
  show(this.$refs.msgError, this.$refs.errorBtn);
}
const defaultClosed = function () {
  this.$refs.defaultBtn.ej2Instances.element.classList.remove("msg-hidden");
}
const infoClosed = function () {
  this.$refs.infoBtn.ej2Instances.element.classList.remove("msg-hidden");
}
const warningClosed = function () {
  this.$refs.warningBtn.ej2Instances.element.classList.remove("msg-hidden");
}
const successClosed = function () {
  this.$refs.successBtn.ej2Instances.element.classList.remove("msg-hidden");
}
const errorClosed = function () {
  this.$refs.errorBtn.ej2Instances.element.classList.remove("msg-hidden");
}
const show = function (message, btn) {
  message.ej2Instances.visible = true;
  btn.ej2Instances.element.classList.add("msg-hidden");
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/message/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-buttons/styles/button/material.css";

  .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>
<template>
  <div class="col-lg-8 control-section msg-icon-section">
    <div class="content-section">
      <ejs-button id="btn1" ref="defaultBtn" content="Show Default Message" cssClass="e-outline e-primary msg-hidden"
        v-on:click="defaultClick"></ejs-button>
      <ejs-message id="msg_default_icon" ref="msgDefault" :showCloseIcon="showCloseIcon" :closed="defaultClosed">Editing
        is restricted</ejs-message>
      <ejs-button id="btn2" ref="infoBtn" content="Show Info Message" cssClass="e-outline e-primary e-info msg-hidden"
        v-on:click="infoClick"></ejs-button>
      <ejs-message id="msg_info_icon" ref="msgInfo" severity="Info" :showCloseIcon="showCloseIcon"
        :closed="infoClosed">Please read the comments carefully</ejs-message>
      <ejs-button id="btn3" ref="successBtn" content="Show Success Message"
        cssClass="e-outline e-primary e-success msg-hidden" v-on:click="successClick"></ejs-button>
      <ejs-message id="msg_success_icon" ref="msgSuccess" severity="Success" :showCloseIcon="showCloseIcon"
        :closed="successClosed">Your message has been sent successfully</ejs-message>
      <ejs-button id="btn4" ref="warningBtn" content="Show Warning Message"
        cssClass="e-outline e-primary e-warning msg-hidden" v-on:click="warningClick"></ejs-button>
      <ejs-message id="msg_warning_icon" ref="msgWarning" severity="Warning" :showCloseIcon="showCloseIcon"
        :closed="warningClosed">There was a problem with your network connection</ejs-message>
      <ejs-button id="btn5" ref="errorBtn" content="Show Error Message" cssClass="e-outline e-primary e-error msg-hidden"
        v-on:click="errorClick"></ejs-button>
      <ejs-message id="msg_error_icon" ref="msgError" severity="Error" :showCloseIcon="showCloseIcon"
        :closed="errorClosed">A problem has been occurred while submitting your data</ejs-message>
    </div>
  </div>
</template>
<script>
import { MessageComponent } from "@syncfusion/ej2-vue-notifications";
import { ButtonComponent, CheckBoxComponent } from "@syncfusion/ej2-vue-buttons";

export default {
  data: function () {
    return {
      showCloseIcon: true,
      checked: true,
    };
  },
  components: { 
    'ejs-message': MessageComponent,
    'ejs-button': ButtonComponent,
    'ejs-checkbox': CheckBoxComponent
  },
  methods: {
    defaultClick: function () {
      this.show(this.$refs.msgDefault, this.$refs.defaultBtn);
    },
    infoClick: function () {
      this.show(this.$refs.msgInfo, this.$refs.infoBtn);
    },
    successClick: function () {
      this.show(this.$refs.msgSuccess, this.$refs.successBtn);
    },
    warningClick: function () {
      this.show(this.$refs.msgWarning, this.$refs.warningBtn);
    },
    errorClick: function () {
      this.show(this.$refs.msgError, this.$refs.errorBtn);
    },
    defaultClosed: function () {
      this.$refs.defaultBtn.ej2Instances.element.classList.remove("msg-hidden");
    },
    infoClosed: function () {
      this.$refs.infoBtn.ej2Instances.element.classList.remove("msg-hidden");
    },
    warningClosed: function () {
      this.$refs.warningBtn.ej2Instances.element.classList.remove("msg-hidden");
    },
    successClosed: function () {
      this.$refs.successBtn.ej2Instances.element.classList.remove("msg-hidden");
    },
    errorClosed: function () {
      this.$refs.errorBtn.ej2Instances.element.classList.remove("msg-hidden");
    },
    severityIconChange: function (args) {
      this.changeProp("showIcon", args.checked);
    },
    closeIconChange: function (args) {
      this.changeProp("showCloseIcon", args.checked);
    },
    show: function (message, btn) {
      message.ej2Instances.visible = true;
      btn.ej2Instances.element.classList.add("msg-hidden");
    }
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/message/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-buttons/styles/button/material.css";

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