Any ways to add icons to custom buttons?

[No5972]

Tried adding the keys of the custom buttons to icons but nothing happened.

var viewer = new PhotoViewer(items, {
  index: 0,
  footerToolbar: ['zoomIn','zoomOut','prev','fullscreen','next','actualSize','rotateRight','openInNew'],
  customButtons: {
    openInNew: {
      text: "新标签打开",
      title: "新标签打开",
      click: function (context, e) {
        window.open(context.img.src);
      }
    }
  },
  icons: {
    "openInNew": "<svg t=\"1614215430739\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"4559\" width=\"16\" height=\"16\"><path d=\"M810.666667 810.666667H213.333333V213.333333h298.666667V128H213.333333a85.333333 85.333333 0 0 0-85.333333 85.333333v597.333334a85.333333 85.333333 0 0 0 85.333333 85.333333h597.333334c46.933333 0 85.333333-38.4 85.333333-85.333333v-298.666667h-85.333333v298.666667zM597.333333 128v85.333333h153.173334l-419.413334 419.413334 60.16 60.16L810.666667 273.493333V426.666667h85.333333V128h-298.666667z\" p-id=\"4560\"></path></svg>"
}});

[nzbin]

The custom buttons support html.

new PhotoViewer(items, {
  footerToolbar: [
    ...
    'myCustomButton'
  ],
  customButtons: {
    myCustomButton: {
      text: '<svg>...</svg>', // add your own svg icon
      title: 'custom!',
      click: function (context, e) {
        alert('clicked the custom button!');
      }
    }
  }
});

Demo: https://codepen.io/nzbin/pen/dyOJKXP