Icon not centered on mobile

Icon looks centered on desktop but is pushed to the right on mobile (iPhone X)

const ezButton = L.easyButton('<span style="font-size:2em; line-height:26px; color:#FF3D2D;">&hearts;</span>', function (btn, map) {
})

Any ideas how to fix?

[kitchensjn]

I’m probably late to this thread but just had to work through this myself:

const ezButton = L.easyButton(
    '<span style="font-size:2em; line-height:26px; color:#FF3D2D;">&hearts;</span>', 
    function (btn, map) {}
)
ezButton.button.style.padding = '0px';

This will remove the padding and allow your icon to be centered within the button. There may be a more elegant way of changing the button style when you initially create it. Hope this helps get you on the right track!

[sonfire186]

https://github.com/CliffCloud/Leaflet.EasyButton/issues/48

function _fixEasyButtonSize(button) {
    var buttonElement = button.button;
    buttonElement.style.padding = '0px';
    buttonElement.style.width = "26px";
    buttonElement.style.height = "26px";
    buttonElement.style.minWidth = "26px";
    buttonElement.style.minHeight = "26px";
}
_fixEasyButtonSize(button);