Custom Print Button

Question

I have implemented the Print feature in my application but the print button is the default dojo 'Print' text and dropdown icon.

What I want to do is remove the text and border and add an icon instead of the text.

I have been following this forum post but I am not getting the mentioned result:

var img = $('<img class="inline" src="img/print_icon.png" />');
$(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").prepend(img);
$(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").children(".dijitButtonText").text('');

This is my code so far. I am trying to change the html in the created button div. The script always runs but no changes to the html.

Answer 1

I have found a way to change the text to an icon. What I did is changed the data in the object: app.printer.

app.printer._printButton.buttonNode.innerHTML = '<div id="dijit_form_ComboButton_0_button" class="dijitReset dijitButtonContents" data-dojo-attach-point="titleNode" role="button" aria-labelledby="dijit_form_ComboButton_0_label" tabindex="0"><div class="dijitReset dijitInline dijitIcon dijitNoIcon" data-dojo-attach-point="iconNode" role="presentation"></div><div class="dijitReset dijitInline dijitButtonText" id="dijit_form_ComboButton_0_label" data-dojo-attach-point="containerNode" role="presentation"><img src="img/print_icon.png" alt="Print" title="Print" /></div></div>';
                app.printer._printButton._buttonNode.innerText = '▼';
                app.printer._printText = '<img src="img/print_icon.png" />';
                app.printer._printingText = '<img src="img/printing_icon.gif" alt="Print... Please wait" title="Print... Please wait" style="height:16px;width:16px;"/>';
                app.printer._printoutText = '<img src="img/print_icon.png" alt="Printout" title="Printout" />';