ckeditor how to add custom icon button image to toolbar: CKEDITOR.getUrl()

i've built a custom ckeditor toolbar dropdown menu, but i was struggling to find out how to add a custom pilcrow icon for the dropdown, until i found this:
http://blog.ale-re.net/2010/07/custom-icon-in-ckeditor-toolbar.html

so here's how i got it to work:

editor.ui.add( 'MyParagraphDropdown', CKEDITOR.UI_MENUBUTTON, {

    label: 'Paragraph styling',
    icon: CKEDITOR.getUrl('../../images/pilcrow.png'),
    onMenu: function() {
        var active = {};
        // Make all items active.        

        for ( var p in items )
            active[ p ] = CKEDITOR.TRISTATE_OFF;

        return active;
    }
} );

here's the pilcrow ( ¶ ) glyph icon button image i created (png w transparent background); 16x16 (font color [dark grey]: 494949):

and here's what it looks like in the ckeditor toolbar: