Quill: Document how to add new toolbar svg icons without creating a toolbar in HTML

[kheraud]

I am trying to add the undo/redo feature for my quill editor :

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['undo'],
  ['redo'],
];
var quill = new Quill('#editor', {
  theme: 'snow',
  placeholder: 'Compose an epic message...',
  readOnly: false,
  modules: {
    history: {
      delay: 2000,
      userOnly: true
    },
    toolbar: {
      container: toolbarOptions,
      handlers: {
        undo: function(value) {
          this.quill.history.undo();
        },
        redo: function(value) {
          this.quill.history.redo();
        }
      }
    }
  }
});

The undo/redo buttons work well but they are not rendered (blank buttons).

I can see that svg icons for redo and undo are located in the assets/icons folder but I can't figure out how to have them rendered in the toolbar.
It seems that all is wired in ui/icons.js but I would like to add this through config options. Is there a way to do that ? I can't find anything about that in the documentation (btw, congratulation for the documentation, it has been updated a lot these last 2 months 👍)

[jhchen]

The icons created in batches so they maintain a consistent style and some are not being used by the project or included in builds. I decided to put all of them in assets/icons/ to make them available in case they are useful.

The way to use them would be to create your own toolbar in HTML and pass that into the container option so there's no way to do what you are asking at the moment. If you'd like to add this ability, I'd be happy to take a look at a PR. I think what you would need to do is add the icons to ui/icon.js and the handlers to modules/toolbar.js.

[alexkrolick]

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
}

[tufail]

Here is my code .. added in constructor before var quill = new Quill('#editor', {

var icons = Quill.import("ui/icons");
    icons["undo"] = `<svg viewbox="0 0 18 18">
    <polygon class="ql-fill ql-stroke" points="6 10 4 12 2 10 6 10"></polygon>
    <path class="ql-stroke" d="M8.09,13.91A4.6,4.6,0,0,0,9,14,5,5,0,1,0,4,9"></path>
  </svg>`;
    icons["redo"] = `<svg viewbox="0 0 18 18">
    <polygon class="ql-fill ql-stroke" points="12 10 14 12 16 10 12 10"></polygon>
    <path class="ql-stroke" d="M9.91,13.91A4.6,4.6,0,0,1,9,14a5,5,0,1,1,5-5"></path>
  </svg>`;

result