Add text label to a custom icon using Leaflet

To add a text label to an icon using Leaflet, you can use the divIcon function:

javascript
var cameraIcon = L.divIcon({

    html: `<div class = 'Icon'>
                <img src = './assets/camera_icon.png'/>
                <div class = 'Number'>1254</div>
           </div>`

});

Then, you can remove the default marker icon:

CSS
.leaflet-marker-icon{
    background: none;
    border: none;
}

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.