[leaflet] Leaflet changing Marker color

adding to @tutts excelent answer, I modified it to this:

... includes a caption - where you can use FontAwesome icons or alike ...

var myCustomColour = '#334455d0', // d0 -> alpha value
    lat = 5.5,
    lon = 5.5;

var caption = '', // '<i class="fa fa-eye" />' or 'abc' or ...
    size = 10,    // size of the marker
    border = 2;   // border thickness

var markerHtmlStyles = ' \
    background-color: ' + myCustomColour + '; \
    width: '+ (size * 3) +'px; \
    height: '+ (size * 3) +'px; \
    display: block; \
    left: '+ (size * -1.5) +'px; \
    top: '+ (size * -1.5) +'px; \
    position: relative; \
    border-radius: '+ (size * 3) +'px '+ (size * 3) +'px 0; \
    transform: rotate(45deg); \
    border: '+border+'px solid #FFFFFF;\
    ';

var captionStyles = '\
    transform: rotate(-45deg); \
    display:block; \
    width: '+ (size * 3) +'px; \
    text-align: center; \
    line-height: '+ (size * 3) +'px; \
    ';

var icon = L.divIcon({
    className: "color-pin-" + myCustomColour.replace('#', ''),

    // on another project this is needed: [0, size*2 + border/2]
    iconAnchor: [border, size*2 + border*2], 

    labelAnchor: [-(size/2), 0],
    popupAnchor: [0, -(size*3 + border)],
    html: '<span style="' + markerHtmlStyles + '"><span style="'+captionStyles+'">'+ caption + '</span></span>'
});

var marker = L.marker([lat, lon], {icon: icon})
.addTo(mymap);

and the ES6 version (like @tutts) .. I am using it with vue-leaflet

// caption could be: '<i class="fa fa-eye" />',_x000D_
function makeMarkerIcon(color, caption) {_x000D_
 let myCustomColour = color + 'd0';_x000D_
_x000D_
 let size = 10,    // size of the marker_x000D_
  border = 2;   // border thickness_x000D_
_x000D_
 let markerHtmlStyles = `_x000D_
  background-color: ${myCustomColour};_x000D_
  width: ${size * 3}px;_x000D_
  height: ${size * 3}px;_x000D_
  display: block;_x000D_
  left: ${size * -1.5}px;_x000D_
  top: ${size * -1.5}px;_x000D_
  position: relative;_x000D_
  border-radius: ${size * 3}px ${size * 3}px 0;_x000D_
  transform: rotate(45deg);_x000D_
  border: ${border}px solid #FFFFFF;_x000D_
  `;_x000D_
_x000D_
 let captionStyles = `_x000D_
  transform: rotate(-45deg);_x000D_
  display:block;_x000D_
  width: ${size * 3}px;_x000D_
  text-align: center;_x000D_
  line-height: ${size * 3}px;_x000D_
  `;_x000D_
_x000D_
 let icon = L.divIcon({_x000D_
  className: 'color-pin-' + myCustomColour.replace('#', ''),_x000D_
  iconAnchor: [border, size*2 + border*2],_x000D_
  labelAnchor: [-(size/2), 0],_x000D_
  popupAnchor: [0, -(size*3 + border)],_x000D_
_x000D_
  html: `<span style="${markerHtmlStyles}"><span style="${captionStyles}">${caption || ''}</span></span>`_x000D_
 });_x000D_
_x000D_
 return icon;_x000D_
}_x000D_
_x000D_
var marker = L.marker([lat, lon], {icon: makeMarkerIcon('#123456d0', '?')})_x000D_
.addTo(mymap);