We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to replace one icon with another and adding event to it?

Platform: Dashboard Platform |
Control: Dashboard SDK

Replacing the existing icon

The following code snippet shows removing the existing icon. You can remove the existing icon in the afterLayoutRender event.

afterLayoutRender: function(args) {
         var dbrdElement = $(args.wrapperElement.prevObject).attr("id");   // Id of Dashboard Element
         var iconToRemove = $('#' + dbrdElement).find('.className');   // ‘className' refers to the class name of the icon you want to remove


Then, you should create a new div element and add class to the created element. Append the new element next to the removed element using the following code snippet.

var iconToAdd = $("<div>").addClass('e-dbrd-test-icon');


To add your font to the new class, refer to the following snippet.

@@font-face {
      font-family: 'test_font';    // ‘test’ is the font name that you are going to replace.
      src: url('@Url.Content("~/DashboardService/fonts/test.ttf")') format('opentype');
      font-style: italic;
      font-weight: bold;
.e-dashboardviewer .e-dbrd-test-icon:before
  content: '\e900';
  font-size: 14px;


By using the following css, you can align the icon properly.


.e-dashboardviewer .e-dbrd-test-icon {
    font-family: 'test_font';
    color: #6d6e70;
    padding: 11px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    float: right;
    margin-right: 2px;


Binding event to the new icon

You can add the event to a new icon by using the following code snippet.

iconToAdd.bind("click", function() {
       alert('Event Triggered');


You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile