How to add custom icon in quill.js toolbar?

@adan 

To add a custom icon in Quill.js toolbar, you can follow these steps:

1. Prepare your custom icon:

First, you will need an SVG file or an image file of your custom icon. Make sure the icon is sized appropriately for the toolbar.

1. Add the icon to your project:

Save your custom icon file in a folder within your project directory.

1. Register the custom icon with Quill:

You will need to register the custom icon with Quill by adding it to the icons object when initializing Quill. Here's an example code snippet:

1
2

var icons = Quill.import('ui/icons');
icons['custom-icon'] = '<path d="M125 ..." fill="#000000"></path>'; // Replace the path data with your custom icon code

1. Add the custom icon to the toolbar:

After registering your custom icon, you can add it to the toolbar by configuring the toolbar options when initializing Quill. Here's an example code snippet:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

var quill = new Quill('#editor', {
  modules: {
    toolbar: {
      container: [
        [{ 'header': '1' }, { 'header': '2' }, { 'header': [3, 4, 5, 6] }, { 'align': [] }],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
        [{ 'script': 'sub' }, { 'script': 'super' }, { 'blockquote': false }, { 'code-block': true }],
        [{ 'bold': true }, { 'italic': true }, { 'underline': true }, { 'strike': true }],
        [{ 'color': [] }, { 'background': [] }],
        ['image', 'link', 'video'],
        ['custom-icon'], // Add your custom icon here
      ]
    }
  },
  theme: 'snow'
});

Replace 'custom-icon' with the key you used when registering the custom icon.

1. Test the toolbar:

Reload your application and check the Quill editor toolbar to verify that your custom icon has been added successfully.

That's it! You have successfully added a custom icon to the Quill.js toolbar.