I want a simpler way to assign icons to my jquery ui buttons

JQuery UI has a nice widget for the buttons, problem is, imoh, that when I want to assign an icon for a button I have to do it for each button separatly.

Here is the sample from the jquery ui website :

<!doctype html>

<html lang="en">
 <meta charset="utf-8" />
 <title>jQuery UI Button - Icons</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
 <link rel="stylesheet" href="/resources/demos/style.css" />
 $(function() {
 $( "button:first" ).button({
 icons: {
 primary: "ui-icon-locked"
 text: false
 icons: {
 primary: "ui-icon-locked"
 icons: {
 primary: "ui-icon-gear",
 secondary: "ui-icon-triangle-1-s"
 icons: {
 primary: "ui-icon-gear",
 secondary: "ui-icon-triangle-1-s"
 text: false

<button>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with two icons</button>
<button>Button with two icons and no text</button>



It works but I think it’s not the easiest way, I would prefer to configure the html tag with a property to say what is the icon I want.

So my solution is to use the data attribute of the element on which we want the button widget to be applied

<a href="#" class="button" data-icon="ui-icon-pencil" id="myid">my text button</a>

and in the document ready of the page

 $(document).ready(function () {

 create: function (event, ui) {
 var icon = $(this).data("icon");
 if (HasValue(icon)) {
 $(this).button("option", "icons", { primary: icon });

Basicly, when a button is created, I check if I have a data-icon property setted, and if so I use it to set the primary icon property of the button.


I’m working with ASP.NET, so if I use WebForms I put that little piece of code in my master page, and if I’m workgin with MVC, I put the code in the _layout.cshtml file.
This way I don’t have to worry about setting the icon for each button.

But where are the icons defined ?

The example I used sooner (ui-icon-pencil) is a class of the icon set of a jquery mobile theme (you can see what’s available on the themeroller page).

If I want to define a custom icon, I do it this way

in the CSS:

 background: transparent url('images/xlsx.png') no-repeat;

and in the html:

<a href="#" class="button" data-icon="ui-icon-pdf">XLSX</a>


Incoming search terms:

  • ASP NET jquery ui button
  • assign ui
  • button(option icons
  • button(option icons not working
  • jquery icons
  • jquery mobile icon from custom css
  • jquery ui button text after custom icon


  1. Johnb45 says:

    very nice submit, i definitely love this website, keep on it daaeafcbaedd

  2. bu.ufsc.br says:

    I read this post fully on the topic of the difference of most up-to-date and previous technologies, it’s awesome article.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>