Leaflet – Creating Custom Legend Control Using L.ExtraMarkers.icon Icons

Question

Is there any way I can add Leaflet Extramarkers to my legend? From what I googled, it seems I'll have to add an image of markers… however I was hoping I could use the ones I created.

var Icon = L.ExtraMarkers.icon({
                        icon: 'fa-graduation-cap',
                        markerColor: theIcon,
                        shape: 'circle',
                        prefix: 'fa'
});


function theIcon(ct){
    if (ct == "Public"){
        Icon.options.markerColor = "orange"
    }
    else if (ct == "Private"){
        Icon.options.markerColor = "cyan"
    }
    else{
        Icon.options.markerColor = "red"
    }
    return Icon
}


function style(feature, latlng){
    
    switch (feature.properties.Sector){
                case 'Public'  : return L.marker(latlng,{icon: theIcon("Public")}).addTo(map); 
                case 'Private' : return L.marker(latlng,{icon: theIcon("Private")}).addTo(map);
    }
}

var univ = new L.WFST(
        {
            url: 'http://localhost:8080/geoserver/HEC/wfs',
            typeNS: 'HEC',
            typeName: 'Unis',
            crs: L.CRS.EPSG4326,
            geometryField: 'the_geom',
            showExisting: true,
            maxFeatures: 500,
        },
    new L.Format.GeoJSON({
        pointToLayer: style,     
    })
);

Edit:

Code for the legend that I am trying to create is:

var legend = L.control({position: 'bottomright'});

legend.onAdd = function (map) {

    var div = L.DomUtil.create('div', 'info legend'),
        grades = ['Public', 'Private', 'Selected'];

    for (var i = 0; i < grades.length; i++) {
        div.innerHTML += 
            '<i style="background:' + theIcon(grades[i]) + '"></i> ' +  grades[i] +  '<br>';
    }

    return div;
};

legend.addTo(map);

Answer 1

L.ExtraMarkers.icon is an extension of standard Leaflet L.icon, which means actual icon HTML code is created only after marker is added to the map, and even then icon HTML code is accessible only through internal ._icon property.

But icon HTML code can be created also independently of map markers with the .createIcon() method. To use the icon outside marker context, its CSS style has to be modified a bit, so in your case code could look something like this:

CSS

.legend-icon {
  display: inline-block;
}
.legend-icon .leaflet-marker-icon {
  position: relative !important;
  margin-left: 0px !important;
  margin-top: 0px !important;
}

JS

var markerColor = {
  "Public": "orange",
  "Private": "cyan",
  "Selected": "red"
};

function theIcon(ct){
  var icon = L.ExtraMarkers.icon({
    icon: 'fa-graduation-cap',
    markerColor: markerColor[ct],
    shape: 'circle',
    prefix: 'fa'
  });
  return icon;
}

var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {     
  var div = L.DomUtil.create('div', 'info legend');
  var grades = ['Public', 'Private', 'Selected'];
  div.innerHTML = '';
  for (var i = 0; i < grades.length; i++) {
     var icon = theIcon(grades[i]).createIcon();
     div.innerHTML += '<div class="legend-icon">' + icon.outerHTML + '</div><div class="legend-icon">' + grades[i] + '</div></br>';
  }
  return div;
};      
legend.addTo(map);

That's how it looks like then: