data-icon in jquery-mobile radio button

Question

I'm looking to replace the text of a my radio buttons with some icons from the data-icons in jquery mobile. My code is like this, and on jsfiddle

<div data-role="page">
    <div data-role="content">
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup"><legend>Choose a direction:</legend>
                <input type="radio" name="1" id="1" value="1" />
                <label for="1">Up</label>
                <input type="radio" name="1" id="2" value="2" />
                <label for="2">Down</label>
            </fieldset>
        </div>
    </div>
</div>

I want to replace 'up' with the data-icon="arrow-u" and 'down' with data-icon="arrow-d". This answer shows how to replace with an external image, but how about data icons?

Answer 1

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

I hope that is what you've wanted.

HTML :

<div data-role="page" id="radio-icons"> 
    <div data-role="content"> 
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
                <label for="radio-choice-1" ><div id="custom-label"><span class="ui-icon ui-icon-bars ui-icon-shadow up">&nbsp;</span></div></label>

                <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
                <label for="radio-choice-2"><div id="custom-label"><span class="ui-icon ui-icon-bars ui-icon-shadow down">&nbsp;</span></div></label>
            </fieldset>
        </div>
    </div>
</div>

CSS :

#custom-label {
    width: 18px;    
    height: 18px;
    background-color: rgba(0, 0, 0, 0.4);
    background-image: url("images/icons-18-white.png");
    background-repeat: no-repeat;
    border-radius: 9px 9px 9px 9px;  
}

#custom-label span {
    left: 45px !important;
    margin-top: -7px;
}

#custom-label span.up {
    background-position: -180px -1px !important;    
}

#custom-label span.down {
    background-position: -216px -1px !important;    
}