Display checkmark svg on top of theme on click of particular theme

I want to display themes ( can be image or div ) and when user selects particular theme checkmark-inside-circle svg in overlay should be displayed on top but transparent so that theme below should be visible (dummy example). Considering theme as mat-radio-button , below is code

HTML

<div class="text-container" name="themeList">
   <mat-radio-group formControlName="theme" aria-label="Select a theme" class="theme-radio-group">
       <mat-radio-button
         *ngFor="let op of themeId; let i = index"
          name="themeList"
          class="theme-radio"
          [value]="i"
          (click)="selectThemeOnClick(i)">

          <div *ngIf="i == 0; else elseBlock">Theme {{i + 1}} (Default) </div>

          <ng-template #elseBlock>Theme {{i + 1}}</ng-template>
          <div #radio [attr.id]=i class="theme-radio-div themeDiv"></div>

        </mat-radio-button>
    </mat-radio-group>
</div>

In above code getting data from array and adding theme name ( default for 1st ) and adding themeDiv with it’s ID.
Tried to display checkmark for 1st theme but was not able to do that ( [checked]=”i === 0″ inside mat-radio-button , didn’t worked )

CSS

:host ::ng-deep .mat-radio-container {
  display: none;
}

.theme-container {
  .text-container {
    .theme-radio-group {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: repeat(3, 226px);
      align-content: space-around;
      justify-content: space-between;

  .themeDiv {
    content: url('example.jpg');
    width: 226px;
    height: 142px;
  }

  .theme-radio-check-mark {
    width:24px;
    height: 24px;
    content: url('check-mark-in-circle.svg');
    opacity: 0.5;
    position:relative;
    left:100px;
    top:60px;
  }
}
 }
}

Hiding radio buttons just showing themeDiv for selection, using grid as div has to be of fixed size ( want to use flexbox , but space-between property creates problem in last row ). Checkmark has to be in middle of div. opacity also didn’t worked .

public selectThemeOnClick(value) {
    this.themeValueId = value;
    const themeRadioDivArray = Array.from(document.querySelectorAll(".theme-radio-div"));
    if (themeRadioDivArray) {
      themeRadioDivArray
      .filter(element => element.classList.contains("theme-radio-check-mark"))
      .forEach((element) => {
          element.classList.remove("theme-radio-check-mark");
      });
    }
    const themeRadioDiv = document.getElementById(this.themeValueId);
    if (themeRadioDiv) {
      themeRadioDiv.classList.add("theme-radio-check-mark");
    }
  }

If clicked on theme, removing class from all other elements and adding class to that clicked theme.

I could only think of replacing div with svg content using css.

Struggling to do following :

Checkmark should be displayed for default theme (considering 1st one for now)
Display checkmark on overlay for selected theme
Use flexbox