I'm using the latest version of quill.js, and was wondering if there's a way to override the svg icons Quill uses when generating editor toolbars (for the bubble theme, if that matters.)
I've tried poking around and see where in the source the icons are defined, but it looks like passing either an array of toolbar options, or defining the markup myself and passing a selector to toolbar both end up inserting svg icons.
Is there a way to customize this behavior without needing to grab the Quill source and doing a custom build? Something like how one can do e.g. Quill.import('formats/link') to customize sanitize()?
The icons in the bubble theme are inlined here.
You can import the icons module before initiating the editor and override the markup of each icon.
In this example I'm replacing the bold icon with the font-awesome bold icon. Remember to also load the font-awesome CSS file.
var icons = Quill.import('ui/icons');
icons['bold'] = '<i class="fa fa-bold" aria-hidden="true"></i>';
// create the editor: var quill = new Quill('#editor-container', {});
In this example I'm replacing the bold icon with svg circle:
var icons = Quill.import('ui/icons');
icons['bold'] = '<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="100"/></svg>';
// create the editor: var quill = new Quill('#editor-container', {});