How to display data:image/png;base64 image on the icon property

[sondreb]

How would I go about to bind a base64 encoded image to the icon property of win-split-view-command?

Is there any other helpers than url() I can use?

[sondreb]

Appears to work when I do this, though I was not earlier able to bind to the icon attribute:

var profileButton = document.getElementById('profileButton');
profileButton.winControl.icon = 'url("' + state.buddyIcon + '")';

Problem though is that my icon is a bit bigger than the small one, and I want to render a bigger one, so here is another workaround that works pretty well:

#profileButton {
    background-repeat: no-repeat;
    background-size: 32px 32px;
    background-position: 8px center;
}

Some JavaScript code to inject a new CSS rule:

document.styleSheets[0].addRule('#profileButton', 'background-image: url("' + state.buddyIcon + '");');

And this is how the markup looks:

<win-split-view-command ng-show="authenticated" label="flickr.state.userName" id="profileButton" ui-sref="profile({userId: flickr.state.userId})"></win-split-view-command>

The end result looks like this:

[sondreb]

It appears I was doing it wrong with the binding syntax, this code works just fine:

<win-split-view-command label="'Settings'" icon="'url(' + state.buddyIcon + ')'" ui-sref="settings"></win-split-view-command>

Though my other suggestion can be used if you want to render something bigger than the default icon sizes.