In Symbol layers show the actual symbol used on the map

[apanagio]

Is your feature request related to a problem? Please describe.
It is hard to distinguish symbol layers on the legend, since they have the same symbol. The more such layers you have, the harder it is . So I propose to read the symbol from the style specification and render it on the legend.

Describe the solution you'd like
The icon should be red from the style specification and rendered on the legend. The easiest way to do it is render it on a small canvas. Sample code to accomplish that for icon-images

function get_legend_symbol(map, layer_id) {
/**
 * Returns an HTML element (canvas) with the symbol taken from the layer style
 * @param {Object} map - The map object 
 * @param {String} layer_id: Id of the layer 
 */
    const style = map.getStyle().layers.find(l => l.id == layer_id)

    const canvas = document.createElement('canvas')
    const [width, height] = [64, 64]
    canvas.id = `${layer_id}_canvas`
    canvas.height = width
    canvas.width = height
    canvas.classList.add('legend-item')
    const img = map.getImage(style.layout["icon-image"])
    const UAC = new Uint8ClampedArray(img.data.data, width, height)
    const DAT = new ImageData(UAC, width, height);
    const ctx = canvas.getContext("2d")
    ctx.putImageData(DAT, 0, 0)
    
    return canvas
}

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[butterfly2sea]

You can just write the icon name at icon-image if you use sprite and every layer has only one certain icon. In this way ,the legend will show the real icon. If one layer has more than one icon, which icon should the legend show ?