Ion icons not appearing in some instances

Question

I am trying to add a heart ion icon to every image in my photo gallery app. This will eventually allow the user to like the image. As you can see from the 1st image below, the heart icon is added to every image apart from two and I can't figure out why?

Also in the 2nd image below you can see that the heart is added to the page where there aren't any images. I also can understand why this is happening?

Here is where the icon is added to the html code:

<a style="cursor: pointer">
    <div class="list-group-item">
        <div class="like-icon-container">
            <ion-icon class="like-icon" name="heart"></ion-icon>
        </div>
        <img [src]="image.imagePath" alt="Praying to the Sun" [ngStyle]="{'height': image.heightSize, 'width': image.widthSize}" class="image-item">
    </div>
</a>

I am using Angular so this is where the components selector is added:

<ul class="container">
    <li class="item-list-container oneSec">
        <app-image-item
          *ngFor="let imageEl of galleryList"
          [image]="imageEl"
          (click)="onImageSelect(imageEl.id)">
        </app-image-item>
    </li>
</ul>

Here is the relevant CSS code:

.like-icon {
    color: red;
    position: absolute;
}