Using a dashicon for a custom button in TinyMCE?

Question

I have created a custom button for TinyMCE and I would like it to use the Twitter icon from dashicons. I am hoping to be able to do this just through the Javascript with no additional CSS. Is this possible?

Here is my current(non-working) attempt:

(function () {
    tinymce.PluginManager.add('twitter_button_plugin', function (editor, url) {
        editor.addButton('mce_tweet_button', {
            title: 'Insert tweet',
            icon: 'dashicons dashicons-twitter',
            onclick: function() {
                ...
            }
        });
    });
})();

Answer 1

Here's your easy solution (hopefully this will help other people too):

1) add a custom class for icon, in this example "myicons"

(function () {
    tinymce.PluginManager.add('twitter_button_plugin', function (editor, url) {
        editor.addButton('mce_tweet_button', {
            title: 'Insert tweet',
            icon: 'myicons dashicons-twitter',
            onclick: function() {
                ...
            }
        });
    });
})();

2) Enqueue your admin stylesheet file

function load_custom_wp_admin_style() {
   wp_enqueue_style( 'custom_wp_admin_css', 'URL/TO/custom_admin_style.css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

3) Then in your custom_admin_style.css file add this:

/**
 * TinyMCE add support for dashicons
 */
i.mce-i-myicon {
    font: 400 20px/1 dashicons;
    padding: 0;
    vertical-align: top;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: -2px;
    padding-right: 2px
}

Answer 2

I am hoping to be able to do this just through the Javascript with no additional CSS. Is this possible?

I assume you only want to stay within tinymce.PluginManager.add( ... ).

Here's a JS workaround with:

jQuery( '.is-dashicon' ).css( 'font-family', 'dashicons' );

within a onPostRender event callback:

(function () {
    tinymce.PluginManager.add('twitter_button_plugin', function (editor, url) {
        editor.addButton('mce_tweet_button', {
            title: 'Insert tweet',
            icon: 'insert-tweet is-dashicon dashicons dashicons-twitter',
            onPostRender: function () {
                jQuery( '.is-dashicon' ).css( 'font-family', 'dashicons' );
            },
            onclick: function() {
                ...
            }
        });
    });
})();

that will generate the tag:

<i class="mce-ico mce-i-insert-tweet 
          is-dashicon dashicons dashicons-twitter" style="font-family: dashicons;"></i>

Example:

Answer 3

Using the OP code when setting icon to 'dashicons dashicons-twitter' the editor renders the button with the following classes 'mce-ico mce-i-dashicons dashicons-twitter'

Therefore without using jQuery what works for me is:

(function () {
    tinymce.PluginManager.add('twitter_button_plugin', function (editor, url) {
        editor.addButton('mce_tweet_button', {
            title: 'Insert tweet',
            icon: 'dashicons dashicons-twitter',
            onPostRender: function () {
             
                elements = document.getElementsByClassName("mce-i-dashicons");
                
                for(i=0; i<elements.length; i++) {
                    
                    elements[i].style.fontFamily = "dashicons";
                }
            }
            onclick: function() {
                ...
            }
        });
    });
})();