How to show layer with markers and custom pictures with ngx-maplibre-gl

Question

I want to use ngx-maplibre-gl to show a lot of markers in a map with custom pictures in a round style.
What I am aiming for is achieved in the following code example with simple markers (mgl-marker).
But:
The maplibre documentation says that it should be avoided to show many many markers (mgl-marker) in a map this way due to a bad performance and instead layers should be used.
So I would like to have the same output as in the following code example but by using layers (mgl-layer).
The biggest problem here for me is to show custom images for the pin in the map with layers, absolutely no clue about how to do this.
So if someone could point me in the right direction I would really appreciate it.
Thanks a lot in advance
Cheers

import { Component } from '@angular/core';

@Component({
  selector: 'showcase-demo',
  template: `
    <mgl-map
      [style]="
        'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL'
      "
      [zoom]="[5]"
      [center]="[-65.017, -16.457]"
    >
      <mgl-marker *ngFor="let feature of geojson.features" [feature]="feature">
        <div
          class="marker"
          [ngStyle]="{
            'background-image':
              'url(https://placekitten.com/g/' +
              feature.properties.iconSize.join('/') +
              '/)',
            width: feature.properties.iconSize[0] + 'px',
            height: feature.properties.iconSize[1] + 'px'
          }"
        ></div>
      </mgl-marker>
    </mgl-map>
  `,
  styleUrls: ['./examples.css', './custom-marker-icons.component.css'],
})
export class CustomMarkerIconsComponent {
  geojson = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: {
          message: 'Foo',
          iconSize: [60, 60],
        },
        geometry: {
          type: 'Point',
          coordinates: [-66.324462890625, -16.024695711685304],
        },
      },
      {
        type: 'Feature',
        properties: {
          message: 'Bar',
          iconSize: [50, 50],
        },
        geometry: {
          type: 'Point',
          coordinates: [-61.2158203125, -15.97189158092897],
        },
      },
      {
        type: 'Feature',
        properties: {
          message: 'Baz',
          iconSize: [40, 40],
        },
        geometry: {
          type: 'Point',
          coordinates: [-63.29223632812499, -18.28151823530889],
        },
      },
    ],
  };
}