I recommend you to publish your results in well-known repositories: npmjs, bower, nuget. You can post it additionally to two free CDNs: cdnjs and jsDelivr. All this is for free, but it can help to make results of your work more known by other people. By the way it you do the work once then creating new tag in GitHub will automatically publish new versions on many from the sources which I mention. I did the work with one my product and can explain you required steps if you would have some problem in understanding how to publish in some from described above repositories of CDNs. You can start with bower and npmjs where you need just create JSON file which is almost the same what you have already and start some command line tools. See here, here and here. You can easy to find more information in internet.

The text-indent value of the .ui-icon element (line 21) in the jquery-ui.icons.css file is set to zero. This shows the text where only the icon should show, for example the datepicker shows the words 'Prev' and 'Next' in your demo. Setting a value of text-indent: -99999px; hides the text leaving only the icon correctly showing.

I often have markup like this:
<button class="dateButton small-button">Select Date</button>

and corresponding JS like this:

    local.btns.jDateButtons = $('.dateButton');

    ...

    local.btns.jDateButtons.button({
        text: false,
        icons:{
            primary: 'ui-icon-calendar'
        }
    }).off().on('click',function(){
        ...
    });

I think I must be missing something here. The markup that contains the ... ui-icon ui-icon-calendar ... isn't created until later and it's done by the jQuery UI button widget. So, where exactly do I put the information for the size and color of the icons?

Am I meant to add CSS like this: ??

    .ui-icon.ui-icon-calendar{
        font-size: 135%;
        color: #00FF00;
    }

How else can I target the span tag that the button widget creates for me on the fly which is where the font-size and color directives apparently need to go?

The above CSS would appear to work, but what if I have multiples of the same icons on the page and I want them to be different sizes or different colors?

Hi, your work is excellent and in the interest of making it even better for I was wondering whether you would be able to add/replace a better (IMHO) icon for the trash can? The old JQUI icon was a trash can similar to the one used in Font Awesome (http://fortawesome.github.io/Font-Awesome/icon/trash-o/) but the new icon looks like a beer glass. Every colleague I have spoken to agrees that it looks like a beer glass, and I've had to change our use of that icon for the cross icon as it didn't look goo in our shopping cart. We use a delete icon next to each item in the cart, and it looked like a stack of beer glasses :-)

I would imagine we're not alone in thinking this, so I thought perhaps it might be a worthwhile endeavour for the good of the plugin. What are your thoughts?

The left edge of the icons appears to be cut off slightly, this is particularly noticeable on the circular icons and affects the demo page. It can be seen on the button icons and on the datepicker prev/next icons (when hiding the text with text-indent, see bug #2 I logged).

As a quick fix I added padding-left: 1px; to the .ui-icon element (line 21) in the jquery-ui.icons.css file. Although this fixes the problem and you can clearly see the full icon, it does make everything a bit bigger and I doubt it's a proper fix, so thought I'd best log a bug for the issue.

Different packages planned:

• Core Icons (jQuery UI and Mobile)
• Database Icons Editor Icons (CMS, Backends)
• User Icons (Addressbook, User Account)
• Folders, Files and Media

It's interesting project! It's the initial version, so it's clear that it could be some bugs and problems.

For example, the resizer icon (ui-icon-gripsmall-diagonal-se) in the Dialog (see your demo) have some problems:

• position: relative instead of position: absolute will be used which make the wrong place of the icon.
• jQuery UI set additional ui-resizable-se class on the resizer div. Because of that the width, height, right and bottom from the CSS rule .ui-dialog .ui-resizable-se will be applied which makes the icon not visible.

Changes in future release

Some CSS classnames are renamed, deleted or replaced in future release.

The goal is, to make usage for you much easier and better quality.

Deleted

Some tests on mobile devices and hdpi screens shows me, that the css only created icons for loading animations looks not so good. These icons and their animations are deleted:

  .ui-busy-icon,  
  .ui-busy-icon-balls,
  .ui-busy-icon-circle,
  .ui-busy-icon-clock,
  .ui-busy-icon-comet,
  .ui-busy-icon-planet,
  .ui-busy-icon-radar,
  .ui-busy-icon-progress,
  .ui-busy-icon-square

Deprecated

Following classnames are deprecated.

1. Loading status

   Old:

     .ui-loading-icon.ui-icon-balls
     .ui-loading-icon.ui-icon-circle
     .ui-loading-icon.ui-icon-comet
     .ui-loading-icon.ui-icon-lines
     .ui-loading-icon.ui-icon-planet

   New:

     .ui-icon-loading-status-balls
     .ui-icon-loading-status-circle
     .ui-icon-loading-status-comet
     .ui-icon-loading-status-lines
     .ui-icon-loading-status-planet

2. File icons

   Old:

     .ui-icon-file-rtf
     .ui-icon-file-spreadsheet, .ui-icon-file-xls
     .ui-icon-file-txt

   New:

     .ui-icon-file-richtext
     .ui-icon-file-table
     .ui-icon-file-text

Replaced

The animations are reassigned to make usage more easier to understand.

Old:

  .ui-animate.clockwise .ui-icon,
  .ui-animate.anti-clockwise .ui-icon, 
  .ui-animate.bounce .ui-icon,
  .ui-animate.bounce-reverse /* <-- this was useless */

New:

  [class^='ui-icon-'].rotate,           /* <-- clockwise */
  [class*=' ui-icon-'].rotate, 
  [class^='ui-icon-'].rotate-reverse,   /* <-- anti clockwise */
  [class*=' ui-icon-'].rotate-reverse,
  [class^='ui-icon-'].bounce,
  [class*=' ui-icon-'].bounce

i could solve it with this workround :

,ui-resizable-se {position:absolute !important}

Just like the "i" for info it could be nice with some icons typically used for text-formating. But right now i'm missing the "T" as symbol for the button [create new text] in a editor. So i'm forced to try making a font fitting the icons boundary which is giving me some troubles.