How to change the icon of leaflet-routing-machine

Question

Here is the usage of "new L.Routing.Control()":

Leaflet Routing Machine - Usage of options

I copied the code and then modify it by adding two "routingControl_1" and "routingControl_2":

var routingControl_1 = new L.Routing.Control({
    waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
    ],
    show: false
}).addTo(map);

var routingControl_2 = new L.Routing.Control({
    waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
    ],
    show: false
}).addTo(map);

But the two "L.Routing.Control()"s have the same icon "leaflet.routing.icons.png" in the UI.

Here is the source code related to "leaflet.routing.icons.png": (I downloaded this project and then search all files contains the keyword "leaflet.routing.icons.png")

https://github.com/perliedman/leaflet-routing-machine/blob/master/dist/leaflet-routing-machine.css

.leaflet-routing-icon {
  background-image: url('leaflet.routing.icons.png');
  -webkit-background-size: 240px 20px;
  background-size: 240px 20px;
  background-repeat: no-repeat;
  margin: 0;
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
}

https://github.com/perliedman/leaflet-routing-machine/blob/master/src/itinerary-builder.js

createStep: function(text, distance, icon, steps) {
  var row = L.DomUtil.create('tr', '', steps),
    span,
    td;
  td = L.DomUtil.create('td', '', row);
  span = L.DomUtil.create('span', 'leaflet-routing-icon leaflet-routing-icon-'+icon, td);
  td.appendChild(span);
  td = L.DomUtil.create('td', '', row);
  td.appendChild(document.createTextNode(text));
  td = L.DomUtil.create('td', '', row);
  td.appendChild(document.createTextNode(distance));
  return row;
}

The "createStep: function(text, distance, icon, steps)" has an icon argument, but I don't know how to set it when creating the "new L.Routing.Control()".

# Here is the dummy code.

var routingControl_1 = new L.Routing.Control({
    waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
    ],
    show: false,
    custom_icon: /path/to/my_icon_1.png
}).addTo(map);

var routingControl_2 = new L.Routing.Control({
    waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
    ],
    show: false,
    custom_icon: /path/to/my_icon_2.png
}).addTo(map);

How to set the custom icon for L.Routing.Control?

Answer 1

You need to customize the Icons through CSS or by extending the functionality of the routing control in order to use your custom icons. This is because you cannot directly pass a custom icon path as an property to L.Routing.Control.

Try to either override Default CSS or extend ing L.Routing.Control to Add Custom Classes