Isn’t the question that the OP has a png file somewhere (e.g. of a flower) and wants to use that as a marker in their Leaflet app?
Something that is explained in Markers With Custom Icons I assume.
That was my understanding, yes.
Thank you. Yes I have the basic markers display like so:
L.BeautifyIcon.icon({
icon: 'info',
iconShape: 'marker',
borderColor: '#8d2027',
textColor: '#8d2027',
backgroundColor: 'transparent'
)}
and now I want to change
icon:'info'
for my own made icon.
How to do it?
Yes, please have a look at my answer above. Having problem to change this icon for my own.
Did you try to follow the instructions in the blog post that I linked before ?
Yes, I’ve changed
icon: 'info'
for
iconUrl: 'test.png'
and it isn’t working 
I didn’t try the steps in the article, but it seems that you also have to define your icon via var greenIcon = L.icon(…) or an icon class, not ?
Not that good yet. You might be right. Could you create one small example so I can follow it, please?
var geelIcon = L.icon({
iconUrl: ‘fotos/geel.png’,
iconSize: [25, 40], // size of the icon
iconAnchor: [12, 45], // point of the icon which will correspond to marker's location
popupAnchor: [0, -30] // point from which the popup should open relative to the iconAnchor
});
Thank you. Now I add
geelIcon
to this code
L.BeautifyIcon.icon({
icon: 'geelIcon',
iconShape: 'marker',
borderColor: '#8d2027',
textColor: '#8d2027',
backgroundColor: 'transparent'
)}
but it doesn’t work. How to solve it?
You don’t use the
var
var geelIcon = L.icon({
iconUrl: 'fotos/geel.png',
iconSize: [25, 40], // size of the icon
iconAnchor: [12, 45], // point of the icon which will correspond to marker's location
popupAnchor: [0, -30] // point from which the popup should open relative to the iconAnchor
});
Otherwise I will have a look to your code, send me a pm
I think you should remove the quotes around geelIcon:
L.BeautifyIcon.icon({
icon: geelIcon,
iconShape: 'marker',
borderColor: '#8d2027',
textColor: '#8d2027',
backgroundColor: 'transparent'
)}
Did as you said but just a plain border, no icon inside Please have a look https://imgur.com/a/ZDoU8ao
A link to your website will help
Or check mine, all the code is in the source
https://www.jan-karina.es/wandelingen/
No website yet …Still no luck how to use it in
L.BeautifyIcon.icon
Did you look into my source code?
Iconmania, When you introduced the code from Sandal man on your machine, did you create a folder “fotos” and placed a file “geel.png” in it? The folder "fotos’ have to go next to the JavaScript file.
I put the file named “geelIcon.png” in the server and therefore called it directly in the code. Also the icon is 37px by 32px so should be ok. But stil not working 
Without a link to your server or website it is difficult to help.
Can’t you place it somewhere online?
Or mail it to me, so I can place it online.
var geelIcon = L.icon({
iconUrl: 'test_icon.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
});
function getCategory(d) {
switch (d) {
default:
return L.BeautifyIcon.icon({
icon: 'info', //When here I change to geelIcon, I have this blank space in the marker. With 'info' it works properly.
iconShape: 'marker',
borderColor: '#8d2027',
textColor: '#8d2027',
backgroundColor: 'transparent'
})
break;
L.geoJSON(xhr.response, {
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
icon: getCategory(feature.properties.category)
// onEachFeature: onEachFeature
});