JavaScript toolbar
How to integrate with fontawsome
Alternativelly to material icons, you can integrate any webfont iconset to your javascript toolbar. The following example shows how to integrate with fontawsome.
Source code
<html> <script src="https://jsuites.net/v3/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v3/jsuites.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <div id='toolbar'></div> <script> <div id='toolbar'></div> jSuites.toolbar(document.getElementById('toolbar'), { container: true, items:[{ type: 'select', width: '50px', options: ['fa-align-right', 'fa-align-left', 'fa-align-center', 'fa-align-justify'], render: function(e) { return '<i class="fa ' + e + '"></i>'; }, onchange: function(a,b,c,d) { console.log(d); } }, { type: 'i', class: 'fa fa-italic', onclick: function() { // Do something console.log('Italic'); } }, { type: 'i', class: 'fa fa-bold', onclick: function() { // Do something console.log('Bold'); } }, { type: 'i', class: 'fa fa-paint-brush', onclick: function(element, instance, item) { if (! item.color) { var colorPicker = jSuites.color(item, { onchange:function(o, v) { console.log('color:', v); } }); colorPicker.open(); } } }] }) </script> </html>