For example, I write this:

L.marker([lat, long], {icon: L.divIcon({html:"China"})}).addTo(map);

I checked the documentation:

By default, it has a 'leaflet-div-icon' CSS class and is styled as a little white square with a shadow.

But how can I change the default style? I try to change the "className", but it doesn't work.

enter image description here

1 Answer 1


Using the className option of the DivIcon correctly removes the default leaflet-div-icon class, hence removes the default styling (white square with black border):

L.marker([lat, long], {
  icon: L.divIcon({
    html: 'Icon text',
    className: 'dummy' // Specify something to get rid of the default class.

Screenshot of result of DivIcon with dummy className option


  • 1
    Yes. It works now. But I know the true reason after I contrast my code and yours. Because I loaded leaflet.marker.highlight.js which made a little difference. Now I removed it, it can work.
    – Hull Qin
    Aug 7, 2018 at 12:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.