OpenTiny Icon options

There are two options for replacing the icons in OpenTiny: icons and icons_url. Tiny recommends using the icons option for icon packs bundled with the product or included in your cloud subscription. Custom or third-party icons should be included using the icons_url option to simplify updating and upgrading OpenTiny.

icons

The icons option allows the editor icons to be extended or replaced using an icon pack. For information on creating icon packs, see: Create an icon pack for OpenTiny.

Type: String

On initialization, OpenTiny will try to load any icon pack specified by the icons option. The icons in the icon pack will be merged with OpenTiny’s default icons and icons in the icon pack will overwrite the default icons with the same identifier.

OpenTiny loads icon packs from the path TINYMCE_BASE/icons/${iconPackName}/icons.js; where:

  • TINYMCE_BASE is the OpenTiny root directory (the directory containing tinymce.min.js).

  • ${iconPackName} is the name of the icon pack.

To use a OpenTiny icon pack:

  1. If required, create a new icons directory in TINYMCE_BASE.

  2. Copy the icon pack into the icons directory.

  3. Add the icons option to tinymce.init.

Example: using icons

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  icons: 'material'  // TINYMCE_BASE/icons/material/icons.js
});

icons_url

The icons_url option allows the editor icons to be extended or replaced using an icon pack. For information on creating icon packs, see: Create an icon pack for OpenTiny.

On initialization, OpenTiny will try to load any icon pack specified by the icons_url option. The icons in the icon pack will be merged with OpenTiny’s default icons and icons in the icon pack will overwrite the default icons with the same identifier.

icons_url is used to specify the location of an icon pack when OpenTiny and the icon pack are loaded from different locations. For example: When loading OpenTiny from Tiny Cloud, the icon pack can be loaded from a different web server.

Type: String

Example: using icons_url

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  icons_url: 'https://www.example.com/icons/material/icons.js', // load icon pack
  icons: 'material'  // use icon pack
});