Use google material design icon ?

[LucaMoiana]

Any plan on supporting new google material design icons? https://www.google.com/design/icons/

[MRokas]

You pretty much can use any icon font, easiest method would be just changing classnames in .css

[ronnievsmith]

Keep the css as is but use this js instead and the material-icons will render properly.

/* Leaflet.AwesomeMarkers, a plugin that adds colorful iconic markers for Leaflet, based on the Font Awesome icons (c) 2012-2013, Lennard Voogdt

http://leafletjs.com https://github.com/lvoogdt */

/global L/

(function (window, document, undefined) { "use strict"; / * Leaflet.AwesomeMarkers assumes that you have already included the Leaflet library. /

L.AwesomeMarkers = {};

L.AwesomeMarkers.version = '2.0.1';

L.AwesomeMarkers.Icon = L.Icon.extend({
    options: {
        iconSize: [35, 45],
        iconAnchor:   [17, 42],
        popupAnchor: [1, -32],
        shadowAnchor: [10, 12],
        shadowSize: [36, 16],
        className: 'awesome-marker',
        prefix: '',
        spinClass: 'fa-spin',
        extraClasses: '',
        icon: 'home',
        markerColor: 'blue',
        iconColor: 'white'
    },

    initialize: function (options) {
        options = L.Util.setOptions(this, options);
    },

    createIcon: function () {
        var div = document.createElement('div'),
            options = this.options;

        if (options.icon) {
            div.innerHTML = this._createInner();
        }

        if (options.bgPos) {
            div.style.backgroundPosition =
                (-options.bgPos.x) + 'px ' + (-options.bgPos.y) + 'px';
        }

        this._setIconStyles(div, 'icon-' + options.markerColor);
        return div;
    },

    _createInner: function() {
        var iconClass, iconSpinClass = "", iconColorClass = "", iconColorStyle = "", options = this.options;

        if(options.icon.slice(0,options.prefix.length+1) === options.prefix + "-") {
            iconClass = options.icon;
        } else {
            iconClass = options.icon;
        }

        if(options.spin && typeof options.spinClass === "string") {
            iconSpinClass = options.spinClass;
        }

        if(options.iconColor) {
            if(options.iconColor === 'white' || options.iconColor === 'black') {
                iconColorClass = "icon-" + options.iconColor;
            } else {
                iconColorStyle = "style='color: " + options.iconColor + "' ";
            }
        }  
    return  "<i " + iconColorStyle + "class='material-icons " + iconColorClass + "'>" + iconClass + "</i>";
    },

    _setIconStyles: function (img, name) {
        var options = this.options,
            size = L.point(options[name === 'shadow' ? 'shadowSize' : 'iconSize']),
            anchor;

        if (name === 'shadow') {
            anchor = L.point(options.shadowAnchor || options.iconAnchor);
        } else {
            anchor = L.point(options.iconAnchor);
        }

        if (!anchor && size) {
            anchor = size.divideBy(2, true);
        }

        img.className = 'awesome-marker-' + name + ' ' + options.className;

        if (anchor) {
            img.style.marginLeft = (-anchor.x) + 'px';
            img.style.marginTop  = (-anchor.y) + 'px';
        }

        if (size) {
            img.style.width  = size.x + 'px';
            img.style.height = size.y + 'px';
        }
    },

    createShadow: function () {
        var div = document.createElement('div');

        this._setIconStyles(div, 'shadow');
        return div;
  }
});

L.AwesomeMarkers.icon = function (options) {
    return new L.AwesomeMarkers.Icon(options);
};}(this, document));

// end //

[chriszrc]

This certainly works, but it would be great to not have to override the source code to make it work, maybe a "html" option or something could be added for these more low level changes-

[clopezpro]

not working draggable