Just another shameless copy of Awesome-Markers, but this time with Material Icons icons and customizable fill and outline colors of the marker.
- Include Material Icons web font in your application. See Google's Guide to learn many ways of doing it. But most likely you will end up with something like that in the
<head>of your HTML:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">- Next, include
Leaflet.IconMaterial's JavaScript and CSS:
<link href="css/leaflet.icon-material.css" rel="stylesheet">
<script src="js/leaflet.icon-material.js"></script>or
npm i leaflet-iconmaterial
- Create a Material icon and add it to your Leaflet map
// Create a semi-transparent bus icon
var busIcon = L.IconMaterial.icon({
icon: 'directions_bus', // Name of Material icon
iconColor: '#aa2187', // Material icon color (could be rgba, hex, html name...)
markerColor: 'rgba(255,0,0,0.5)', // Marker fill color
outlineColor: 'yellow', // Marker outline color
outlineWidth: 1, // Marker outline width
iconSize: [31, 42] // Width and height of the icon
})
// Attach the icon to the marker and add to the map
L.marker([41.76,-72.67], {icon: busIcon}).addTo(map)- Shamelessly adapted from Leaflet.AwesomeMarkers by @lvoogdt - MIT License
- SVG and other magic by @wesleyvandevoorde from a never merged pull request
- Material Icons by Google - Apache-2.0 license.