Missing documentation for available icons

[merwok]

Hello! I am writing a plugin to add a custom button to the toolbar. https://www.tiny.cloud/docs-4x/advanced/creating-a-custom-button/ https://www.tiny.cloud/docs-4x/advanced/creating-a-plugin/

In the docs I see a couple examples of possible values for icon, a class associated with a CSS rule like ::before { content: "code" } which is combined with a custom font to produce an icon. I do not know how to find the list of valid classes, the list of valid codes or the pictures of the icons used. I think the docs should give a list with previews, or other instructions.

Thanks for considering this!

[merwok]

I think I finally found the source: https://icomoon.io/#preview-free I recognize symbols from the built-in plugins, but not all of the classes on that page work for my custom button (e.g. power not accepted, arrow-right must be arrowright).

Not sure if it’s a doc issue or a skin issue.

[tylerkelly13]

@merwok We have just published a listing of all possible icon values: https://www.tiny.cloud/docs/advanced/editor-icon-identifiers/ And added a page on adding custom icons: https://www.tiny.cloud/docs/advanced/creating-an-icon-pack/

[merwok]

Thanks, that is useful.

(Part of my problem persists: the page mentions arrow-right, but when I worked on this I found I had to use arrowright.)

[tylerkelly13]

Just checked with the developers, if you are using TinyMCE 4, the icons will be different. We made the update to the TinyMCE 5 docs because we no-longer actively maintain the TinyMCE 4 documentation.

Since there is no easy way to get the list, here it is:

$ grep -o 'mce-i-[[:alnum:]]*' ./tinymce/js/tinymce/skins/lightgray/skin.min.css | sed s/mce-i-// | sort | uniq 

a11y, aligncenter, alignjustify, alignleft, alignnone, alignright, anchor, arrowdown, arrowdown2, arrowleft, arrowright, arrowup, arrowup2, backcolor, blockquote, bold, books, borderwidth, browse, bubble, bullist, charmap, checkbox, checkmark, code, codesample, contrast, copy, count, crop, cut, drag, drop, editimage, emoticons, fill, fliph, flipv, forecolor, format, fullpage, fullscreen, gamma, help, home, hr, image, indent, info, insert, insertdatetime, invert, italic, line, link, lock, ltr, media, menu, menu2, minus, moon, newdocument, newtab, nonbreaking, notice, numlist, options, orientation, outdent, pagebreak, paste, pastetext, plus, pluscircle, preview, print, question, redo, reload, remove, remove2, removeformat, resize, resize2, restoredraft, rotateleft, rotateright, rtl, save, searchreplace, selected, settings, sharpen, spellchecker, strikethrough, subscript, sun, superscript, table, table2, tablecellprops, tabledelete, tabledeletecol, tabledeleterow, tableinsertcolafter, tableinsertcolbefore, tableinsertrowafter, tableinsertrowbefore, tableleftheader, tablemergecells, tablerowprops, tablesplitcells, tabletopheader, template, toc, translate, underline, undo, unlink, unlock, upload, user, visualblocks, visualchars, warning, zoomin, zoomout

[merwok]

Aha! Thanks for the clarification and the tinymce4 list! :rocket:

(FTR I was using this indirectly thanks to django-tinymce4-lite project, which doesn’t plan to have a tinymce5 version — see romanvm/django-tinymce4-lite#52. I may start such a version someday, django-tinymce4-lite is only a few hundreds lines of code)