Question

Is there a better shorter way to rewrite the code. I have 10 of those buttons each with a different icon.

$("#Text").button({
    icons: {
        primary: "ui-icon-locked"
    }
});

$("#Text1").button({
    icons: {
        primary: "ui-icon-gear"
    }
});

$("#Text2").button({
    icons: {
        primary: "ui-icon-comment"
    }
});

Answer 1

You could create an id to icon class mapping object and then iterate over it:

var mapping = {
    "Text" : "ui-icon-locked",
    "Text1" : "ui-icon-gear",
    "Text2" : "ui-icon-comment"
};

$.each(mapping, function(id, icon) {
    $('#' + id).button({ icons : { primary : icon } });
});