Jquery Mobile - On a dialog how to change the "delete" icon in the header

Question

I have the following structure:

<div data-rola="dialog" id="languages" data-close-btn="right" 
data-direction="reverse">
    <header data-role="header">
        <a href="#" id="closeMenu" data-role="button" data-icon="home" 
        data-iconpos="notext" data-corners="true" data-iconshadow="false">
            Close
        </a>
        <h2>LANGUAGES</h2>
     </header>
    <section data-role="content">
        <ul class="jqm-menu">
            <li>
                <a href="#" data-role="button" data-iconpos="right" 
                data-shadow="false" data-wrapperels="div">
                    Text
                </a>
            </li>
        </ul>
    </section>

I want to change the dialog "delete" icon for the "arrow-l" icon, because this dialog menu is the second one menu that will appear after showing the general one. And clicking on that icon is not going to close the dialog, it is going to move back to the previous menu.

Can anyone explain me how can I change the icon?

Answer 1

You can do it with this line:

$('#closeMenu').buttonMarkup({ icon: "arrow-l" });

Official documentation: http://api.jquerymobile.com/button/ search for an option "icon".

EDIT :

Here's a working jsFiddle example: http://jsfiddle.net/Gajotres/nBGMQ/

In it, original icons for a back button was home. This code:

$('#previous').buttonMarkup({ icon: "arrow-l" });

changed it to arrow-l.

Example was taken from Omar and its answer: jQuery Mobile Multiple Dialog Boxes in One Dialog