Uncaught TypeError: options.icon.slice is not a function: `new L.AwesomeMarkers.icon` do not work on startIcon and endIcon

[SubiNesa]

Currently if we want to use L.AwesomeMarkers.icon it will not work as the error Uncaught TypeError: options.icon.slice is not a function is being triggered

      const options = {
        async: true,
        markers: {
          startIcon: 'leaf-green.png',
          endIcon: new L.AwesomeMarkers.icon({
            icon: 'coffee',
            prefix: 'fa',
            markerColor: 'green',
            iconColor: 'yellow',
          }),
        },
        polyline_options: { color: 'red' },
      };

FIX: Here is the example of the entire project that will work: https://github.com/SubiNesa/gpx/blob/main/leaflet-gpx.html

The only change done is here https://github.com/SubiNesa/gpx/blob/main/gpx.js#L470 compared to https://github.com/mpetazzoni/leaflet-gpx/blob/main/gpx.js#L304

[mpetazzoni]

Thanks @SubiNesa for reporting and for the fix in #162!

[ward]

In case anyone else experienced it: this also broke adding Leaflet's DivIcon as a start or end icon in some situations (specifically: you got [object Object] if you used just a string as html property, the same occurred for a className you might have specified).

[mpetazzoni]

@ward Hi! Are you saying the fix for this created a new bug? Or that this also fixes the bug you're talking about?

[ward]

Apologies for not being clear enough. This fix also fixed my DivIcon problem, I commented in case someone searches the issue tracker for that particular problem.

[mitchwenman]

This is still broken for me?

    const AwesomeMarkers = (L as any).AwesomeMarkers;


    const startMarker = AwesomeMarkers.icon({
      icon: 'play', // FontAwesome or Ionicons icon
      markerColor: 'green', // Options: 'red', 'blue', 'green', etc.
      prefix: 'fa' // FontAwesome ('fa') or Ionicons ('ion')
    });
    
    const endMarker = AwesomeMarkers.icon({
      icon: 'flag-checkered',
      markerColor: 'red',
      prefix: 'fa'
    });

    const options = {
      async: true,
      markers: {
        startIcon: startMarker,
        endIcon: endMarker,
      },
      polyline_options: { color: 'red' },
    }; 
    const gpxLayer = new L.GPX(GPX_FILE_URL, options);

This triggers the same error: Uncaught TypeError: options.icon.slice is not a function