Add support for defining an icon with a number of variants

This allows you to define something like this:

```
icons: {
    rulePassed: {
        x16:    'tick.png',
        x32:    'tick-32x32.png',
        _:      '^x16'
    },
    event_rulesPassed:   '@rulePassed',
    event_rulePassed:    '@rulePassed'
}
```

This defines 5 icons, and 2 img+css (the assets loaded into the browser).

The first bits for rulePassed define 2 icons 'rulePassedx16' and 'rulePassedx32' pointing at tick.png and tick-32x32.png respectively.  The special _ key is the default which will be used to set the 'rulePassed' icon.  The special syntax here with '^x16' means that he default icon is really the 'x16' variant & ATM this only works for the default '_' variant.

Icon objects also now have a variant() method on them, so you can:

    var icon = MyIcons.get('foo');

Which gets you the icon object, and then you can get a variant by:

    var bigger = icon.variant('x32');

If the variant does not exist then it returns the same icon.

Oh and those other icons which are using '@' syntax are simply aliases to other defined icons, '^' is only for back referencing into an icons variants.  I suppose I could have just used this too:

    _: '@rulePassedx16'

But I'm hiding the details of how the variant is used to construct the target icon name, so that should be avoided I think.

 * * *

This was the best I could come up with for a simple way to define icons of various sizes and expose them to the UI in a simple/sane way.