Custom icon in CKEditor toolbar

Disclaimer: this post is starting unfinished. I'm pretty sure there are 2 (or more) methods of handling icons in CKEditor - and the "best one" involves the usage of bundled images, maybe using resources and so on. The way I'm showing here is a pretty quick fix, that probably is good only when your plugin have few buttons.

Bundling icons (i.e. composing many icons in a single image, and then extracting from that each icon you need) is a Good Thing, and you shall take that way, because reduces request overhead, it's easier when it comes to caching, updating and so on. You shall totally take that way when you have many icons. But I still don't know how to do it, so if you know or find out before me, please leave a comment.

How to set a custom icon

• Put your icons in the plugin directory (maybe under yourplugin/images/ or something else, but it's not required).
• Use the icon attribute when defining a button or a menu item.
• Specify the path for the icon using CKEDITOR.getURL().

An example for toolbars and menus

In this example, a function will add a button in the toolbar and the menu, with same parameters.

function addButtonAndItem(definition, execCode, listener) {

  editor.addCommand(definition.command, { exec: execCode });

  if (editor.addMenuItem)

    editor.addMenuItem(definition.command, definition);

  if (editor.contextMenu)

    editor.contextMenu.addListener(listener);

  var button = CKEDITOR.tools.clone(definition);

  delete button.group;

  editor.ui.addButton(button.command, button);

}

editor.addMenuGroup('myGroup');

addButtonAndItem({

  command: 'myCommand',

  label: 'Do something',

  icon: CKEDITOR.getUrl(this.path + 'images/mcIcon.gif'),

  group: 'myGroup'

}, function(editor) {

  alert("Doing something");

}, function(elem, select) {

  return { myCommand: CKEDITOR.TRISTATE_ON };

});

and don't forget to add your button in the config:

config.toolbar = 'myToolbar';

  config.toolbar_myToolbar = [

    ['Source', 'myCommand' /* ... */]

  ];

Stay --sync

EDIT: Found another method here:
http://www.voofie.com/content/2/ckeditor-plugin-development/#Button_Icon