Добавьте изображение к пустому изображению SVG в листовке с помощью divIcon

Question

Я пытаюсь создать divIcon для использования с листовыми картами.Я могу создать маркер с пустым кружком, используя код изображения SVG, но я хотел бы добавить изображение внутри круга.Это возможно?Я пробовал фоновые изображения и т.д., но ничего не работает.

Код

var iconSettings = {
        mapIconUrl: '<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 149 178"><path fill="{mapIconColor}" stroke="#FFF" stroke-width="6" stroke-miterlimit="10" d="M126 23l-6-6A69 69 0 0 0 74 1a69 69 0 0 0-51 22A70 70 0 0 0 1 74c0 21 7 38 22 52l43 47c6 6 11 6 16 0l48-51c12-13 18-29 18-48 0-20-8-37-22-51z"/><circle fill="{mapIconColorInnerCircle}" cx="74" cy="75" r="61"/><circle fill="#FFF" cx="74" cy="75" r="{pinInnerCircleRadius}"/></svg>',
        mapIconColor: '#cc756b',
        mapIconColorInnerCircle: '#fff',
        pinInnerCircleRadius:48
    };

// icon normal state
var divIcon = L.divIcon({
    className: "leaflet-data-marker",
  html: L.Util.template(iconSettings.mapIconUrl, iconSettings), //.replace('#','%23'),
  iconAnchor  : [12, 32],
  iconSize    : [50, 60],
  popupAnchor : [0, -28]
});