Custom marker for each category on Leaflet Mapbox

I am trying to place an image for each category I have but I can’t get it to work.

I am using GeoJSON to get the data from a WordPress.
I have tried many things but I don’t know exactly where to change the icons for each category.

My icons are stored in http://map.local/category1.png, http://map.local/category2.png...

 <?php
          $arg = array( 'post_type' => 'lugar', 'posts_per_page' => 10,);
          $loop = new WP_Query( $arg );
          $posts = $loop ->get_posts();
          foreach( $posts as $post ) { 
            $output[] = array(
              'address' => $post->address,
              'category'=> $post->category,
              'Latitude'=> $post->lat,
              'Longitude'=>$post->lon,
              'title'=>get_the_title(),
              'url'=> get_permalink()
            );
          } 
          $json =json_encode($output);
?>
    <script>
        var data = <?php echo $json ?>;
        var map = L.map('map',{
            center:[39.4697500, -0.3773900],
            zoom:14,
            zoomControl: false
        });
        L.control.zoom({
          position: 'bottomright'
        }).addTo(map);

L.tileLayer('xx', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
tileSize: 512,
zoomOffset: -1,
}).addTo(map);

        var markers=L.markerClusterGroup();
        let geojsonData = createGeoJson(data);

        function createGeoJson(data) {
            var geojson = {
                "type":"FeatureCollection",
                "features":[

                ]
            };

            data.forEach(element => {
                let marker = L.marker([element.Latitude, element.Longitude]);
                let pntGeojson = marker.toGeoJSON();

                pntGeojson.properties = element;
                geojson.features.push(pntGeojson);
            });

            return geojson;
        }


  
        var categorynone = L.geoJson(geojsonData, {
            onEachFeature:function(feature, layer) {
              let content = '<span class="title">' + feature.properties.title + '</span>' +  '<span class="address">' + feature.properties.address + '</span>' +  '<a href="'+ feature.properties.url + '">' + 'Més informació' + '</a>';
                layer.bindPopup(content);
            },
            pointToLayer:function(geoObj, latLng) {
                return L.marker(latLng);
              
            },
            filter:function (feature,layer){
                return feature.properties.category == "";  
            }

        });



        for (let i = 1; i < 8; i++) {

            this["category"+i] = L.geoJson(geojsonData, {
                onEachFeature:function(feature, layer) {
                let content = '<span class="title">' + feature.properties.title + '</span>' +  '<span class="address">' + feature.properties.address + '</span>' +  '<a href="'+ feature.properties.url + '">' + 'Més informació' + '</a>';

                        layer.bindPopup(content);
                
                },
                pointToLayer:function(geoObj, latLng) {
                    return L.marker(latLng);
                
                },
                filter:function (feature,layer){
                    return feature.properties.category == "categoria" +i;  
                }

            });


        }

        var all = L.layerGroup([category1,category2,category3,category4,category5,category6,category7]);
        L.control.layers({
            "All":markers,
            "Category 1": category1,
            "Category 2": category2,
            "Category 3": category3,
            "Category 4": category4,
            "Category 5": category5,
            "Category 6": category6,
            "Category 7": category7,
            
        }).addTo(map);
        markers.addLayer(all);
        markers.addTo(map);

        console.log(markers);

    </script>

for (let i = 1; i < 8; i++) {
  let markerIcon = L.icon({
    iconUrl: 'path_to_icon/category' + i + '.png'
  });

  this["category" + i] = L.geoJson(geojsonData, {
    onEachFeature: function(feature, layer) {
      let content = '<span class="title">' + feature.properties.title + '</span>' +  '<span class="address">' + feature.properties.address + '</span>' +  '<a href="'+ feature.properties.url + '">' + 'Més informació' + '</a>';
      layer.bindPopup(content);
    },
    pointToLayer: function(geoObj, latLng) {
      return L.marker(latLng, {icon: markerIcon});
    },
    filter: function(feature,layer){
      return feature.properties.category == "categoria" + i;  
    }
  });
}