Although this information may be dated, I wanted to share my solution for those who might find it useful. In my case, I am utilizing TinyMCE 4 and made the following CSS adjustment:

.mce-ico.mce-i-fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

When assigning icons to buttons, you can simply do the following:

editor.addButton('adjust', {
    tooltip: 'Adjust Layout',
    icon: 'fa fa-adjust',
    onclick: function () {
        dialogLayout(editor, url, settings);
    }
});

This approach allows for the easy incorporation of any Font Awesome icons without the need for distinct class layouts per icon.

I hope this proves helpful to someone in their development efforts.

It seems like you are looking to include a button with an image in the list of icons within tinyMCE.

 tinymce.PluginManager.add("video", function (editor) {   
    editor.addButton('video', {
        tooltip: 'Insert video',
        image: tinymce.baseURL + '/plugins/video/icons/video.gif',
        onclick: function() {

        }
    }); 
});

To achieve this, create a new folder (e.g., "video") and within it, create another folder named "icons" where you can store your image. Next, create a file called video.js under the video folder.

In the latest version of TinyMCE, known as TinyMCE v5, a new functionality called tinymce.editor.ui.Registry has been introduced. This method, named addIcon, allows users to register a new SVG icon with the editor instance it was configured for. The purpose is to provide customizable icons for various Ui components.

The registered SVG icon can be referenced by name and utilized by different TinyMCE 5 Ui elements that support icon display. It remains exclusive to the specific editor instance it was assigned to.

Parameters of the Method:

addIcon(name: String, svgData: String)

• name (String) - A unique identifier for the newly added icon.
• svgData (String) - The SVG data string used by the browser to render the SVG icon.

Implementation of the Method:

// Example code to add a basic triangle icon:
editor.ui.registry.addIcon('triangleUp', '<svg height="24" width="24"><path d="M12 0 L24 24 L0 24 Z" /></svg>');

Subsequently, you can reference this unique identifier in creating custom buttons like so:

editor.ui.registry.addButton('youtube', {
  text: 'Add Video' ,
  icon: 'triangleUp',
  onAction: () => {
    // Perform desired actions here...
  }
});

Result:

In the case of tinymce 5, an example code snippet that can be utilized is as follows:

editor.ui.registry.addButton('customButton1', {
    text: '<span class="fa fa-youtube"></span>',
    //icon: '<span class="icon-youtube"></span>',
    onAction: () => alert('Button clicked!')
});

This easy-to-use stylesheet was successful for me:

i.mce-i-[FONT-AWESOME-CLASSNAME]:before {   // Customize FONT-AWESOME-CLASSNAME like "icon-youtube"
    content: [FONT-AWESOME-CONTENT];         // Update FONT-AWESOME-CONTENT such as "\f166"
    font-family: FontAwesome;
}

It's suitable for both toolbar buttons and menu items.

ed.addButton('youtube', {
     title: 'Insert Video' ,
     icon: '[FONT-AWESOME-CLASSNAME]',
     onclick: function () { /* perform magic here */ }
}

ed.addMenuItem('youtube', {
     text: 'Insert Video' ,
     icon: '[FONT-AWESOME-CLASSNAME]',
     onclick: function () { /* perform magic here */ },
     context: 'view'
}

Avoid using position: absolute to prevent disrupting the layout in the menu.

If you are using TinyMCE 4 and FontAwesome 5, the CSS code below will help you achieve your desired results:

.mce-ico.mce-i-fas {
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

I've built upon Ricardo's response and devised a method to incorporate font awesome icons into your project. Follow these steps:

1. Visit the font awesome website and locate the SVG of the desired icon:

https://fontawesome.com/icons/sitemap?f=classic&s=solid

2. Embed the SVG icon into tinyMCE:

editor.ui.registry.addIcon('iconName', '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M208 80c0-26.5 21.5-48 48-48h64c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48h-8v40H464c30.9 0 56 25.1 56 56v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H464c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V288c0-4.4-3.6-8-8-8H312v40h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H256c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V280H112c-4.4 0-8 3.6-8 8v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V288c0-30.9 25.1-56 56-56H264V192h-8c-26.5 0-48-21.5-48-48V80z</path></svg>');

3. Associate the icon with the button:

                    editor.ui.registry.addButton('btn', {
                        text: 'Workflow Field',
                        icon: "iconName"
                    });

Result: