Quill.import('ui/icons');
を利用して、アイコンの表示内容を書き換えられる。
<div class="toolbar">
<button type="button" class="ql-underline"></button>
</div>
<div class="editor"></div>
var icons = Quill.import('ui/icons');
// ここではSVGを利用しているが、もちろんFontAwesomeなどのアイコンを利用することも可能
icons['underline'] = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="red" version="1.1" id="Icons" viewBox="0 0 32 32" xml:space="preserve"><g><path d="M29,27H3c-0.6,0-1,0.4-1,1s0.4,1,1,1h26c0.6,0,1-0.4,1-1S29.6,27,29,27z"/><path d="M5,24h4c0.6,0,1-0.4,1-1s-0.4-1-1-1H8.6l1.9-4h11.1l1.9,4H23c-0.6,0-1,0.4-1,1s0.4,1,1,1h4c0.6,0,1-0.4,1-1s-0.4-1-1-1 h-1.4L16.9,3.6C16.7,3.2,16.4,3,16,3s-0.7,0.2-0.9,0.6L6.4,22H5c-0.6,0-1,0.4-1,1S4.4,24,5,24z M16,6.3l4.6,9.7h-9.2L16,6.3z"/></g></svg>';
// Quill初期化処理
const editor = document.querySelector('.editor');
const toolbar = document.querySelector('.toolbar');
const quill = new Quill(editor, {
theme: 'snow',
modules: {
toolbar: toolbar,
}
});