Marker.PNG 404 Not Found when using Leaflet in ionic app

I am trying to add leaflet to my ionic app, the map is displaying as expected.

But no markers are displaying, & I’m getting these error messages in the console:

GET http://localhost:4200/marker-icon-2x.png 404 (Not Found)

GET http://localhost:4200/marker-shadow.png 404 (Not Found)

Here is my map-component.html:

<div class="map-container">
  <div class="map-frame">
    <div id="map"></div>

Here is my typescript:

private map;
  constructor(private markerService: MarkerService) {
  ngAfterViewInit(): void {

  private initMap(): void { ='map', {
      center: [39.8282, -98.5795],
      zoom: 3
    const tiles = L.tileLayer('https://{s}{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '© <a href="">OpenStreetMap</a>'

And here is makeCapitalMarkers():

makeCapitalMarkers(map: void {
    this.http.get(this.capitals).subscribe((res: any) => {
      for (const c of res.features) {
        const lat = c.geometry.coordinates[0];
        const lon = c.geometry.coordinates[1];
        const marker = L.marker([lon, lat]);

Can someone please tell me why I’m getting that error message in the console, & how I can find these files? I can post whatever additional code is helpful too.

Thanks a lot in advance!

Hello, did you find the solution? I have the same problem…

You can change the current path of the icon in leaflet css. So don’t use the url leaflet.css, download the file and change it.

.leaflet-default-icon-path {
    background-image: url(;