How do the icons in TinyMCE work?

Question

I can't seem to be able to find any information about this on the interwebs, but how do the icons in TinyMCE 4 work?

I know I can specify icons for buttons by name and specify custom icons for my custom buttons, but what if I wanted to take one of the standard icons, modify it in an image editing application and then save it as a custom icon. Where do I get the source image for that icon? Where can I see the full list of available icons and their names?

Answer 1

So, here is, possible, a partial answer to my own question or at least what I have managed to understand based on the poor documentation that currently exists for this aspect of TinyMCE 4.

Icons in TinyMCE 4.x use a custom IcoMoon font. The files for this font go in the skins//fonts directory.

If you download the TinyMCE Dev Package, you can find in js/tinymce/skins/lightgray/Icons.less all the icons that are available for that particular skin and you will be able to use those icons for your custom buttons (if you are using that skin).

You need to use the word between "-i-" and ":before". e.g. if the definition in Icons.less is:

.@{prefix}-i-alignleft:before

You can use the keyword alignleft as an icon for your custom button.

I haven't gotten as far as adding more icons to the default set, but I guess it would involve creating a new theme, hopefully inheriting from a parent theme, and defining your own Icons.less file and then process that LESS file to generate the appropriate CSS for your theme.