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. (Last updated on: November 16, 2018).
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?

You can replace the existing icon with a new icon by removing 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;




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


iconToAdd.bind("click", function() {

       alert('Event Triggered');




Article ID: Published Date: Last Revised Date: Platform: Control:
8914 07/06/2018 07/06/2018 Dashboard Platform Dashboard SDK
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Please sign in to access our KB

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

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