Search code examples
angularjsleafleticonsangular-leaflet-directive

using angular material icons on a leaflet map (instead of leaflet extra-marker icons )


i want to use material design icons as icon on the leaflet map. First I try with the extraMarker like this :

var marker = {
                lat: 51.505,
                lng: -0.009,
                focus: true,
                message: 'hey',
                draggable: false,
                icon: {
                    type: 'extraMarker',
                    icon: 'fa-coffee',
                    markerColor: 'red',
                    iconColor: 'black',
                    prefix: 'fa',
                    shape: 'circle'
                },
             };

this extraMarker is added successfully on the map with the coffee icon. my problem is : how can i use the angular material icon (e.g : local_cafe icon instead of fa-coffee ? ). there is a way to render materials icon on the leaflet map ?

Thanks !


Solution

  • See the Leaflet.Icon.Glyph plugin.