Add custom svg icons to plotly.js

0. Setup

Clone this gist
cd into it
Run npm i

1. Add a glyph to the plotly.js source icon file

Open up node_modules/plotly.js/src/font/ploticon/ploticon.svg
Add a <glyph /> tag.

For example, a coffee mug icon would look like:

<glyph glyph-name="coffee" d="M1600 640q0-80-56-136t-136-56h-64v384h64q80 0 136-56t56-136zm-1664 768h1792q0 106-75 181t-181 75h-1280q-106 0-181-75t-75-181zm1856-768q0 159-112.5 271.5t-271.5 112.5h-64v32q0 92-66 158t-158 66h-704q-92 0-158-66t-66-158v-736q0-26 19-45t45-19h1152q159 0 271.5 112.5t112.5 271.5z"/>

2. Compile the new icon into a custom plotly.js bundle

cd into node_modules/plotly.js/
Run npm i
Run npm run build

3. Use your new icon

in for example to add a custom mode bar button to your chart.

<html>
<body>
  <div id="graph"></div>

  <script type="text/javascript" src="node_modules/plotly.js/dist/plotly.js"></script>
  <script>
    Plotly.plot('graph', [{
        y: [2, 1, 2]
    }], {
        title: 'my chart'   
    }, {
        modeBarButtonsToAdd: [{
            name: 'custom button',
            icon: Plotly.Icons['coffee'],
            click: function() {
                console.log('hello world');     
            }
        }] 
    });
  </script>
</html>

Add custom svg icons to plotly.js

Add custom svg icons to plotly.js

0. Setup

1. Add a glyph to the plotly.js source icon file

2. Compile the new icon into a custom plotly.js bundle

3. Use your new icon

plotly.js-add-custom-icons

package.json