Custom Icon indexes aren't being displayed to the left of the hamburger menu

I have a couple of Apexchart-charts with custom edit and delete icons added to the toolbar. They only show on hover. I'd like to position them left from the hamburger menu, but I haven't been able to do so. I've looked through the documentation of Apexcharts and I haven't been able to find anything that lets me rearange existing icons.

The relevant code:

  const customIcons = showIcons
    ? [
        {
          icon: `<div onmouseover="style.color='#333333'" onmouseleave="style.color='#6e8192'">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="22" fill="none" viewBox="0 0 24 24">
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z"/>
</svg>
</div>`,
          index: 1,
          title: "Edit",
          class: "custom-edit-icon",
          click: function () {
            handleEditClick(chartDataToEdit);
          },
        },
        {
          icon: `<div onmouseover="style.color='#EE4B2B'" onmouseleave="style.color='#6e8192'">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="21" fill="none" viewBox="0 0 24 24">
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 7h14m-9 3v8m4-8v8M10 3h4a1 1 0 0 1 1 1v3H9V4a1 1 0 0 1 1-1ZM6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7Z"/>
</svg>
</div>`,
          index: 2,
          title: "Delete",
          class: "custom-delete-icon",
          click: handleOpenModalClick,
        },
      ]
    : [];


const options: ApexOptions = {
    title: {
      text: dataAtIndex.displayName || "",
      style: { color: alpha(theme.palette.text.primary, 0.9) },
    },
    chart: {
      type: "pie",
      toolbar: {
        show: true,
        tools: {
          download: true,
          customIcons: customIcons,
        },
      },
    },
    labels: dataAtIndex.columns || [],
    dataLabels: {
      enabled: true,
    },
    legend: { labels: { colors: alpha(theme.palette.text.primary, 0.9) } },
    colors: dataAtIndex?.color || [],

So the answer is to set the indexes to a minus value. This way your custom icons will show the left of the existing icons, e.g. the hamburger menu.

          index: -1,
          title: "Edit",
          class: "custom-edit-icon",
          click: function () {
            handleEditClick(chartDataToEdit);
          },