How can I create a Cytoscape node with a label and an image which fits the content?

Question

What I am attempting to create is a Cytoscape node that would look similar to:

What I have so far is in the snippet below. I can get close with manual fine-tuning of the text-margin-x property.

What is missing is that I would like the node to be only as wide as it needs to be with equal margins to the left of the image and right of the label text. The label text is of unknown length.

Is this possible to achieve with Cytoscape? If so, how?

I have tried using 'width': 'label', but that does not take into account the text-margin-x setting.

const circleSVG = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg 
  width="16px" 
  height="16px"
    viewBox="0 0 16 16" 
    xmlns="http://www.w3.org/2000/svg">
  <circle style="fill:#00ff00;stroke-width:1.32292" cx="8" cy="8" r="8" />
</svg>`;

const encodedSVG = "data:image/svg+xml;utf8," + encodeURIComponent(circleSVG);

const cy = cytoscape({
  container: document.getElementById("chart"), // container to render in

  elements: [
    {
      data: { id: "a"}
    }
  ],

  style: [
    // the stylesheet for the graph
    {
      selector: "node",
      style: {
        'background-color': '#666',
        'background-image': encodedSVG,
        'background-position-x': 8,
        label: 'hello',
        'text-valign': 'center',
        'text-halign': 'center',
        shape: 'rectangle',
        width: '200px',
        'text-margin-x': '-50px',
      }
    }
  ],

  layout: {
    name: "grid",
    rows: 1
  }
});

.fa-test {
  font-family: "FontAwesome";
  color: red;
}

.chart {
  color: red;
  width: 1000px;
  height: 400px;
  background-color: lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.28.1/cytoscape.min.js"></script>

<div class="chart" id="chart">
</div>