Icon doesn't render properly when using SVG and fa-icon

[leonardotvd]

Using SVG to be able to apply RGB color on an Extra Marker icon, it is not rendering properly the icon. As you can see in the image below, the fa-bolt icon is below the marker and there is a red shadow.

That is my code to create the extra marker:

var customIcon = L.ExtraMarkers.icon({
icon: 'fa-bolt',
markerColor: '#3deb47',
shape: 'start',
prefix: 'fa',
svg: true
});

What have I missed?

[coryasilva]

The only problem I see is that the value for shape should be "star" not "start". (but that might just be a typo in the issue...)

…

On Thu, Aug 6, 2020, 3:28 PM leonardotvd ***@***.***> wrote: Using SVG to be able to apply RGB color on a Extra Marker icon, it is not rendering properly the icon. [image: GreenStartBoltIcon] <https://user-images.githubusercontent.com/48744269/89588844-997dab80-d898-11ea-8b41-04b75e1cde90.png> That is my code to create the extra marker: var customIcon = L.ExtraMarkers.icon({ icon: 'fa-bolt', markerColor: '#3deb47', shape: 'start', prefix: 'fa', svg: true }); What have I missed? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#55>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAUMSTCBLFABKSR6A7RN65DR7MVBZANCNFSM4PXBEIIQ> .

[leonardotvd]

Even changing "start" to "star", it is showing wrong. Can you see that red shade behind the start and also the bolt icon under the marker? Is that right?

[coryasilva]

@leonardotvd Did you ever resolve this issue? (sorry for the 1 year later follow up... life)

[giaroc]

Hi, same problem here. Using SVG the icon is not in the correct position.
I have found this workaround. You have to set an extraClass to the marker icon and then you can add a CSS. In my example I used the following options:

L.ExtraMarkers.icon({
extraClasses: 'translate-to-markers',
icon: 'fa-circle',
iconColor: 'white',
markerColor: '#feb96a',
shape: 'circle',
prefix: 'fa',
svg: true
});

and my css:
.translate-to-markers {
transform: translate(11px, -41px);
}

[JaviCodess]

Hi, i tried with the extraclass and is still not working. Does anyone have a solution for this issue?

[do9xe]

This is was causing the issue for me. Setting icon to true (or to any string at all) made my Marker show up on the map.
https://github.com/coryasilva/Leaflet.ExtraMarkers/blob/c4f5f1e4184194b584ef112a609af7a1f91db172/src/assets/js/leaflet.extra-markers.js#L30C23-L30C23