Override built-in icons with your own class names

The icons option still accepts class names. Summernote wraps them with the theme UI helper, so you can swap only the icons you care about and keep the built-in button behavior unchanged.

Toolbar demo paragraph with one link.

Toolbar inspection

Ready.

Example configuration - Class Overrides

summernote.create('#custom-icon-class-editor', {
  height: 220,
  toolbar: [
    ['style', ['bold', 'italic', 'underline']],
    ['para', ['ul']],
    ['insert', ['link']],
  ],
  icons: {
    bold: 'demo-icon demo-icon-bold',
    italic: 'demo-icon demo-icon-italic',
    underline: 'demo-icon demo-icon-underline',
    unorderedlist: 'demo-icon demo-icon-list',
    link: 'demo-icon demo-icon-link',
  },
});