Content and Label on a Node - Cytoscape

I've found a solution using the extension: https://github.com/kaluginserg/cytoscape-node-html-label.

You can create custom HTML labels for nodes which do not interfere with the base Cytoscape labels. An example of using the Material Icons:

// Initialise the HTML Label
this.cy.nodeHtmlLabel([{
  query: '.nodeIcon',
  halign: 'center',
  valign: 'center',
  halignBox: 'center',
  valignBox: 'center',
  tpl: (data) => {
    return '<i class="material-icons">' + data.icon + '</i>';
  }
}]);

// Add the HTML Label to the node:
const node =  {
  group: 'nodes',
  data: {
    id: data.id,
    label: data.label,
    icon: data.icon
  },
  classes: 'nodeIcon' // <---- Add the HTML Label class here
};

With the method you can dynamically create nodes with font icons without the need to download a load of images.

You can even add CSS styling to change the colour of the icon: