How can I increase the default size 16px from Jquery-UI icon set?

I want to increase the size of JQuery icons from开发者_如何学C 16 to 24px.

You can add a CSS style zoom, although this does not work in all browsers e.g.

.zoomClassPercent {
zoom:150%;
}

.zoomClassRatio {
zoom:1.5;
}

im pretty sure that the icons are packed into a css sprite grid therefor cant be bigger ... the only thing i could think of is adding a margin around it but then the icon would still be small in the middle of a bigger empty space.

or even opening the sprite and making bigger icons ! ;)

Here what i would try (you would still have to edit your sprite sheet but im sure soneone descent with photoshop can make it easy :

function getPos(X,Y,Size)
{
    var posJson = { posX:0,posY:0 };
    posJson.posX = X*-Size;
    posJson.posY = Y*-Size;
    return posJson;
}
$(document).ready(function(){
    var Pos = getPos(0,1,16);
    $(".ui-icon-carat-1-n").css("background-position",Pos.posX+"px "+Pos.posY+"px");
});