Значок маркера всегда по умолчанию

Я использую Leaflet для отображения карты в ионном приложении, и я использую https://github.com/Leaflet/Leaflet.markercluster#customising-the-clustered-markers, чтобы включить кластеризацию.

Я не могу отобразить свой собственный значок, я всегда получаю синий по умолчанию.

Сначала я создаю markerClusterGroup

  var markers = L.markerClusterGroup({
    spiderfyOnMaxZoom: true,
    showCoverageOnHover: true,
    zoomToBoundsOnClick: true
  });

Затем я создаю Иконку:

  var myIcon = L.icon({
      iconUrl: '<myiconurl.png>'
  });

Затем я заполняю массив маркеров, просматривая массив объектов, которые мне нужно отобразить на карте, и привязываю всплывающее окно к каждому маркеру.

for (var i = 0; i < $scope.arrayOfVenues.length; i++) {
    var name = $scope.arrayOfVenues[i].name;
    var id = $scope.arrayOfVenues[i].venueID;
    var image = $scope.arrayOfVenues[i].venueImageURL;
    var distanceTo = "4 Miles Away";
    var popupContent = "<div style='height:200px;width:100%;position:relative;cursor:pointer;z-index:999999' nav-transition='ios' onclick='window.navDetails(" + id + ")'><img style='object-fit: cover;position:absolute;left:0;top:0;' height='200' width='100%' src='" + image + "'/><h3 style='color:#FFFFFF !important;position:absolute;z-index:100;bottom:3vh;left:14px;font-size:3vh;'>" + name + "</h3><h3 style='color:#FFFFFF !important;position:absolute;z-index:100;bottom:0;left:14px;font-size:2.5vh;'>" + distanceTo + "</h3></div>"
    markers.addLayer(L.marker([
      $scope.arrayOfVenues[i].latitude,
      $scope.arrayOfVenues[i].longitude, {
        title: $scope.arrayOfVenues[i].name,
        riseOnHover: true,
        icon:myIcon
      }
    ]).bindPopup(popupContent, {
      maxWidth: 300,
      minWidth: 300,
      minHeight: 300,
      maxHeight: 300
    }));
    debugger
  }
   mymap.addLayer(markers);

После отображения на карте все работает нормально, за исключением того, что у меня все еще есть значки маркеров по умолчанию.

Какие-нибудь советы?