Ability to insert own HTML instead of predefined icons

[ccoenen]

Allows you to use HTML inside (well, on top of) the marker. I use this to add SVG icons to your lovely markers!

use like this:

var science = L.ExtraMarkers.icon({
    markerColor: 'white',
    shape: 'square',
    innerHTML: '<img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Aperture_Science.svg" width="20px" height="20px" style="margin-top: 8px;">'
});

L.marker([51.941196,4.512291], {icon: science}).addTo(map);

The margin-top is probably not ideal, but i also did not want to introduce huge amounts of CSS changes - which other people might need to workaround in turn.

[ccoenen]

Addition: If you include the full SVG (can also be a xlink:href) and use currentColor as fill or stroke, you now have the ability to customize the fill via CSS!

var science = L.ExtraMarkers.icon({
    markerColor: 'white',
    shape: 'square',
    innerHTML: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="position: relative; top: 8px;" width="20px" height="20px" viewBox="0 0 530.973 530.973" enable-background="new 0 0 530.973 530.973" xml:space="preserve"><path fill="currentColor" d="M320.622,16.038c-48.13-10.56-96.075-6.789-139.409,8.433l205.646,142.285L363.887,29.585  C350.117,23.897,335.676,19.34,320.622,16.038z M381.61,37.721l41.565,244.095l79.798-112.224  C480.031,113.27,437.342,65.91,381.61,37.721z M164.624,30.954C107.809,55.459,60.469,100.197,33.57,158.183l248.56-46.176  L164.624,30.954z M508.526,184.605L367.76,388.57l135.075-25.795c5.425-13.334,9.788-27.293,12.978-41.823l1.161-5.589  C525.838,270.157,522.227,225.371,508.526,184.605z M165.219,149.9L26.793,174.226c-4.543,11.86-8.283,24.22-11.088,37.004  C5.067,259.717,8.992,308.02,24.5,351.609L165.219,149.9z M107.782,257.134L31.555,369.377  c24.248,54.834,67.436,100.631,123.173,127.418L107.782,257.134z M496.049,377.989l-242.225,46.989l111.375,76.992  C421.459,478.19,468.575,434.608,496.049,377.989z M146.782,370.741l23.439,132.869c12.988,5.211,26.556,9.434,40.676,12.53  c47.857,10.5,95.541,6.83,138.681-8.18L146.782,370.741z"/></svg>'
});
var marker = L.marker([51.941196,4.512291], {icon: science});
marker._icon.classList.add('demo-color'); // I'm pretty sure accessing the _icon directly violates all kinds of rules. But it works.
marker.addTo(map);

.demo-color {
    color: cyan;
}

Boom. Cyan SVG.

Sadly, this approach can't work with <img src="mysvg.svg">, CSS won't reach into another document. And a SVG loaded that way counts as a different document.

[coryasilva]

That is pretty awesome; I will try to incorporate that into a purely vector version of leaflet extra markers.