Use iconElementTag with other options than CSS class

[henning410]

I try to use it in Ionic. So i set
iconElementTag: 'ion-icon',

Now i need to add the name attribute to it, for example:
name='location-outline'

This cannot be done at the moment I think?

[domoritz]

I don't think so.

[KristjanESPERANTO]

There's no single option for this, but the createButtonCallback option gives you full control over the button DOM - so you can set any attribute you like.

It's a little more than a one-liner, but it's straightforward once you see the pattern:

L.control.locate({
  createButtonCallback(container, options) {
    const link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
    link.title = options.strings.title;
    link.href = '#';
    link.setAttribute('role', 'button');
    link.setAttribute('aria-label', options.strings.title);

    const icon = L.DomUtil.create('ion-icon', '', link);
    icon.setAttribute('name', 'location-outline');
    icon.classList.add('leaflet-locate-icon'); // important: keeps state-based icon swapping working

    return { link, icon };
  }
}).addTo(map);

The key detail: keep leaflet-locate-icon on the icon element - the control uses that class to swap the icon when the locate state changes (e.g. spinner while loading).

Give it a try and let us know if it works for you! 🙂