Some custom SVGs in Mapbox are not clickable

Question

I am using mapbox 1.13.3 to render a map with some svgs as the icons. I have over twenty icons, but only two of them are not clickable from the map, so I am unsure if this is a mapbox problem or a svg problem.

First, the icons are added to the map like this:

    const imgName = `layer-${layer.id}-icon`;

      const img = new Image(30, 30);
      img.onload = () => {
        if (!this.map?.hasImage(imgName)) {
          this.map?.addImage(imgName, img, { sdf: false });
        }
      };

      const svgBase64 = btoa(layer.iconPath);
      const imgSource = `data:image/svg+xml;base64,${svgBase64}`;
      img.src = imgSource;

My original goal is to be able to fully customize the svg icons from my app, so I am adding them like this and I am also turning sdf to false because the quality of the icons gets quite affected, even in the documentation examples.

Then, I am associating the icons to the layers like this:

const symbolLayerOptions = {
      'source-layer': layerName,
      type: 'symbol',
      layout: {
        'icon-size': [
          'interpolate',
          ['linear'],
        ],
        'icon-allow-overlap': true,
        'icon-image': ['coalesce', ['image', imgName ]], // associating the icon here
      },
      paint: {
        'icon-color': hexColor,
      },
    };

Yet while some of the icons are triggering a normal map click event on my map, some of them are not clickable. I have limited understanding of svgs and I have not made them myself so there may be an issue there.

These are the icons that are not clickable.

<svg width="25" height="25" viewBox="2.453000068664551 1.2391672134399414 6.060999870300293 8.293999671936035"
    xmlns="http://www.w3.org/2000/svg">
    <path fill="#DAA520" stroke="#FFDAA520" stroke-width="5%"
        d="M5.5,2.8231668 C5.1700001,2.8231668 4.8913336,2.9405003 4.664,3.1751671 C4.4366665,3.4098339 4.323,3.6921673 4.323,4.0221667 C4.323,4.3521671 4.4384995,4.6326671 4.6694999,4.863667 C4.9004993,5.094667 5.1773329,5.2101669 5.5,5.2101669 C5.8226666,5.2101669 6.0976667,5.0928335 6.3249998,4.8581667 C6.5523329,4.6235003 6.6659999,4.3448339 6.6659999,4.0221667 C6.6659999,3.6921673 6.5523329,3.4098339 6.3249998,3.1751671 C6.0976667,2.9405003 5.8226666,2.8231668 5.5,2.8231668 z M5.5,2.328167 C5.9619999,2.328167 6.3561664,2.4931669 6.6824999,2.8231668 C7.0088329,3.1531668 7.1719999,3.5528336 7.1719999,4.0221667 C7.1719999,4.4915004 7.0088329,4.8911672 6.6824999,5.2211671 C6.3561664,5.5511675 5.9619999,5.7161674 5.5,5.716167 C5.0380001,5.7161674 4.6438332,5.5511675 4.3175001,5.2211671 C3.9911666,4.8911672 3.8279998,4.4915004 3.8280001,4.0221667 C3.8279998,3.5528336 3.9911666,3.1531668 4.3175001,2.8231668 C4.6438332,2.4931669 5.0380001,2.328167 5.5,2.328167 z M5.4780002,1.6791668 C4.7593331,1.6791668 4.1488333,1.9358335 3.6464999,2.4491668 C3.1441665,2.9625001 2.8929996,3.5858335 2.8929999,4.3191667 C2.8929996,5.2065001 3.1606665,6.2001667 3.6960001,7.3001671 C4.2826667,8.4955006 4.8839998,9.0931664 5.5,9.0931664 C6.1159997,9.0931664 6.7099996,8.4955006 7.2820001,7.3001671 C7.8099999,6.2001667 8.0740004,5.2065001 8.0740004,4.3191667 C8.0740004,3.5931673 7.8228331,2.9716673 7.3204999,2.4546671 C6.8181667,1.9376669 6.204,1.6791668 5.4780002,1.6791668 z M5.4780002,1.2391672 C6.3213334,1.2391672 7.0381665,1.539834 7.6285,2.1411667 C8.218833,2.7425003 8.5139999,3.4685001 8.5139999,4.3191667 C8.5139999,5.2651672 8.2353325,6.3248339 7.678,7.498167 C7.0253329,8.8548336 6.2993331,9.5331669 5.5,9.5331669 C4.7006664,9.5331669 3.9709997,8.8548336 3.3109999,7.498167 C2.7389998,6.3175001 2.4530001,5.2578335 2.4530001,4.3191667 C2.4530001,3.4685001 2.7463334,2.7425003 3.3329999,2.1411667 C3.9196665,1.539834 4.6346664,1.2391672 5.4780002,1.2391672 z" />
</svg>

<svg width="25" height="25" viewBox="5.960464477539063e-8 -1.018051989376545e-7 25.999971389770508 25.9990234375"
    xmlns="http://www.w3.org/2000/svg">
    <path fill="#59F000"
        d="M6.9840097,10.513 L6.9840097,21.395996 L13.484011,21.395996 L13.484011,20.104935 L8.3717394,20.104935 L8.3717394,10.513 z M6.2820868,9.7869864 L13.817184,9.7869864 L14.547695,12.460141 C14.547695,12.460141 26.740934,11.493523 25.964396,25.999023 L18.840256,25.999023 L18.840256,23.95117 C18.840256,23.95117 18.749294,21.56205 16.648272,21.391365 L14.273723,21.391365 L14.239594,21.391365 L14.215572,21.438053 C13.337569,23.057156 11.850633,24.12167 10.163891,24.12167 C8.47715,24.12167 6.9899926,23.057156 6.1118231,21.438053 L6.0877948,21.391365 L0.25399786,21.391365 L0.25399786,12.403416 L5.6880326,12.403416 z M2.1700892,0.00037193298 C3.193078,0.018374443 4.2267795,0.6849699 4.2267795,0.68496895 C5.9163256,2.220911 8.0628204,0.6849699 8.0628204,0.68496895 C10.300396,-0.79365063 12.400903,0.8555851 12.400903,0.8555851 C14.091017,1.6522207 15.278035,1.0835962 15.278035,1.0835962 C16.694014,0.0023069382 17.744047,0.1162796 17.744047,0.1162796 C20.758083,0.2303133 20.393108,3.5295296 20.393108,3.5295296 C19.662064,7.1700344 16.967501,6.0327358 16.967501,6.0327358 C15.826024,5.2927876 14.319005,4.8947787 14.319005,4.8947787 C12.766405,4.8381515 12.674919,7.6820068 12.674919,7.6820068 L7.5148315,7.6820068 L7.1033025,5.7480817 C6.6013012,4.0415111 4.6832805,5.1787748 4.68328,5.1787748 C2.0346994,7.1700344 0.80169928,5.463428 0.80169916,5.463428 C-0.88833463,2.9608388 0.61868024,0.8555851 0.61868048,0.8555851 C0.97978866,0.22998905 1.518983,0.014328957 2.0711584,0.0006980896 C2.1041007,-0.00011539459 2.1370893,-0.00020980835 2.1700892,0.00037193298 z" />
</svg>

I also include an example of an icon that is clickable:

<svg width="25" height="25" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
    <path fill="#DAA520" d="M0,0L64,0 64,64 0,64z" />
</svg>

I am guessing this issue may be related to the viewBox property of my icons, but it is only a hunch. Any ideas?