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

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

         iconToRemove.hide();

}

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

$(iconToRemove).after($(iconToAdd));

@@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;

}

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

}

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

       alert('Event Triggered');

});