Icon to layer control (leaflet.js)

Question

Problem with adding icon to layer control.

CSS:

.fa-b:before {
        font-family: Courier;
        font-weight: bold;
        content: 'B';
    }

JS:

var geojsonLayer = new L.GeoJSON.AJAX("https", {
        pointToLayer: function(feature,yx){
          var marker = new L.marker(yx, {
            icon: L.AwesomeMarkers.icon({
              icon: 'fa-b',
              markerColor: 'cadetblue',
              prefix: 'fa'})});
          return marker;}
      });

var clusterGroup = new L.markerClusterGroup();
      geojsonLayer.on('data:loaded', function() {
      clusterGroup.addLayer(geojsonLayer);
      map.addLayer(clusterGroup);
      })


var groupedOverlays = {
        "Group": {
          '<icon class = fa-b > B': clusterGroup
        }}

Answer 1

The signature for Leaflet Layers Control is a single level dictionary:

var overlays = {
  'HTML name to be displayed': leafletLayer
};

The syntax for Font Awesome icons is:

<i class="fas fa-icon-name"></i>

For example:

var layer = L.marker([48.86, 2.35]).addTo(map);

L.control.layers(null, {
  '<i class="fas fa-bus"></i>': layer
}).addTo(map);

Live example: https://plnkr.co/edit/Se17LxLjqGg6sJTYNCoq?p=preview

Of course you do not necessarily have to use Font Awesome.

Your custom class seems to work fine, once you correct how you specify your overlays: https://plnkr.co/edit/NCUhg9Hrkh1q5EC3wvWU?p=preview