Is there a way to override Quill's svg icons?

Question

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()?

Answer 1

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', {});

Answer 2

Quill js let you customise the toolbar. You can use font awesome, your own SVGs, or custom functionality. Here is guidelines with sample.

Create toolbar button

<div id="tooltip-controls">
  <button id="bold-button"><i class="fa fa-bold"></i></button>
  :
</div>

Create blot

class BoldBlot extends Inline { }
BoldBlot.blotName = 'bold';
BoldBlot.tagName = 'strong';

Handle click event

$('#bold-button').click(function() {
  quill.format('bold', true);
});

Register with quill

Quill.register(BoldBlot);

Check on codepen

Answer 3

Copy Pasta of an issue from github: ( haven't tried it with bubble ):

Quill creates buttons with .ql-* classes for every registered style in the config. You can override the blank buttons by targeting those classes with CSS as below (for an attachment icon):

.ql-attachment {
  background: no-repeat scroll 50% 50% transparent !important;
  background-image: url("attachment.svg") !important;
  text-align: center;
}

.ql-attachment:hover {
  background-image: url("attachment-hover.svg") !important
}