How can I convert database / table data to filename?

Hello everyone I just want to ask about flyer markers.

I have a database and a table with a field that is named icon_name and looks like this.

|icon_name|
___________
|FIRE     |
|HOMICIDE |
|RAINSTORM|

      

        
        
        
      

    

and I also have a Named Legends folder and it has a file that looks like this.

Folder Name: Legends
Files Inside:

FIRE.jpg
HOMICIDE.jpg
RAINSTORM.jpg

      

        
        
        
      

    

so as you can see the jpg filenames in my table are the same (icon_name)

My code below calls a specific image in a folder and uses it as a Leaflet marker image before placing it on the map (Note: the following code generates marker information from database to map)

    var Icon1 = L.icon({ //<---Assigning a name of an image into a Leaflet Icon.
        iconUrl: 'legends/FIRE.jpg',//<--- Image Folder Location + the Image Name
        iconSize: [50, 50], //<--- Size of the image converted as icon
        iconAnchor:   [23, 50], //<--- Icons Anchor
        popupAnchor:  [3, -50] //<--- Leaflet Pop up

function getInfo() { 
    $.getJSON("get_info.php", function (data) { 
      for (var i = 0; i < data.length; i++) { 
        var location = new L.LatLng(data[i].lat, data[i].lng); 
        var marker = new L.Marker(location,{icon:Icon1}); 
           marker.bindPopup(
              data[i].name + "<br>" + 
              data[i].user_date + "<br>" + 
              data[i].user_time + "<br>" + 
              data[i].address + "<br>"
           ).addTo(map);
           marker.on('click', function(e) { // HERE YOU GO
                var ll = marker.getLatLng();
document.querySelector('#userLat1').value = ll.lat;
document.querySelector('#userLng1').value = ll.lng;
alert('You have selected a Marker that will be deleted'); 

           });
         } 
    }); 
  } 

      

        
        
        
      

    

Now the above code looks like this:

Many markers from different parts of the map (good) All images of these markers are only "FIRE.jpg", even if other markers have "icon_name" HOMICIDE, RAINSTORM and others.

Now here is my big question: how to pass the value of my table's icon_name field to var Icon1 or iconUrl

var Icon1 = L.icon({
iconUrl: 'legends/FIRE.jpg',

      

        
        
        
      

    

so the output will be different markers with different markers image. I hope you understand me. TY

Based on the given answer for me, this is my tested code, but it doesn't work.

(part of code)

    for (var i = 0; i < data.length; i++) { 
            var location = new L.LatLng(data[i].lat, data[i].lng); 
         var Icon1 = L.icon({
               iconUrl: 'legends/FIRE.jpg',
               marker.bindPopup(
                  data[i].name + "<br>" + 
                  data[i].user_date + "<br>" + 
                  data[i].user_time + "<br>" + 
                  data[i].address + "<br>"
               ).addTo(map);