リーフレット：geojsonレイヤーでカスタムマーカーを使用する方法

リーフレットマップにgeojsonを配置しようとしていますが、デフォルトのブルーマーカーを使用するまで、すべて正常に機能します。

次に、カスタムマーカー（小さな.pngアイコン）を使用し、コードを次のように変更しました

 var my_json;
 $.getJSON('../Dati/my-geojson.geojson', function(data) {
           my_json = L.geoJson(data, {
            pointToLayer: function(feature, latlng) {
                var smallIcon = L.Icon({
                    options: {
                        iconSize: [27, 27],
                        iconAnchor: [13, 27],
                        popupAnchor:  [1, -24],
                        iconUrl: 'icone/chapel-2.png'
                    }
                });
                return L.marker(latlng, {icon: smallIcon});
            },
           onEachFeature: function (feature, layer) {
                   layer.bindPopup(feature.properties.ATT1 + '<br />'
                                                 + feature.properties.ATT2);
           }
         });
 my_json.addTo(markers.addTo(map));
 TOC.addOverlay(my_json, "My layer name in TOC");
 map.removeLayer(my_json); 
 });

Firebugで確認できるエラーは

TypeError: this.options.icon is undefined
var anchor = L.point(this.options.icon.options.popupAnchor || [0, 0]);

何かがうまくいかないが、私はそれを修正する方法がわかりません。

ただ変える

 var smallIcon = L.Icon({
   options: {
     iconSize: [27, 27],
     iconAnchor: [13, 27],
     popupAnchor:  [1, -24],
     iconUrl: 'icone/chapel-2.png'
   }
 });

に

 var smallIcon = new L.Icon({
     iconSize: [27, 27],
     iconAnchor: [13, 27],
     popupAnchor:  [1, -24],
     iconUrl: 'icone/chapel-2.png'
 });

アイコンの公式ドキュメントとこのチュートリアルをご覧ください。

newL.Iconには使用しません（必要ないはずですが、それがないと問題が発生します...）

サンプルを再利用したデモをご覧ください。

L.Iconクラスを拡張するときに構文が機能しているはずです。

私はこれが少し新しいので私が間違っていても許してください、しかし私はあなたがそれを大文字のIでL.Iconと綴ったことに気づきました。たぶんバージョンは新しいか何かですが、私がそれをそのように綴ったときそれは機能しません。小さいiのL.iconはうまく機能します。

また、returnステートメントで小文字の小文字の名前を使用しました。