<!--Normal image-->
<ng-container *ngIf="iconclass && (!path && !mda) && overlay || overlayText || titlePara || imgTitle ">
<div class="img-container" [ngClass]="addimageCSSClass()"  [ngStyle]="{'top':top,'bottom':bottom,'left':left,'right':right} ">
  <ng-container *ngIf="path || (path && iconclass)">
    <ng-container *ngIf="!(width || height)">
      <img alt="title" [src]="path" [attr.class]="cclass" (click)="onImageClick($event)" [attr.title]="tooltip">
      <div *ngIf="overlay" [ngClass]="overlayEffect">
        <div *ngIf="overlayText" [ngClass]="overlayTextClass">{{overlayText}}
          <p *ngIf="titlePara">{{titlePara}}</p>
        </div>
      </div>
      <div *ngIf="imgTitle" [ngClass]="position">{{imgTitle}}</div>
    </ng-container>
    <ng-container *ngIf="width || height">
      <img alt="title" [ngStyle]="{'width':width,'height':height}" [attr.class]="cclass" [src]="path" (click)="onImageClick($event)" [attr.title]="tooltip">
       <div *ngIf="overlay" [ngClass]="overlayEffect">
        <div *ngIf="overlayText" [ngClass]="overlayTextClass">{{overlayText}}
          <p *ngIf="titlePara">{{titlePara}}</p>
        </div>
      </div>
      <div *ngIf="imgTitle" [ngClass]="position">{{imgTitle}}</div>
    </ng-container>
  </ng-container>
  </div>
</ng-container>



<ng-container *ngIf="!(iconclass && (!path && !mda) && overlay || overlayText || titlePara || imgTitle )">
    <ng-container *ngIf="path || (path && iconclass)">
    <ng-container *ngIf="!(width || height)">
    <img alt="title" [src]="path" [attr.class]="cclass" (click)="onImageClick($event)" [attr.title]="tooltip">
    </ng-container>
    <ng-container *ngIf="width || height">
    <img alt="title" [ngStyle]="{'width':width,'height':height}" [attr.class]="cclass" [src]="path" (click)="onImageClick($event)" [attr.title]="tooltip">
    </ng-container>
    </ng-container>
    </ng-container>
    
<!--this is for fontawesome-->
<ng-container *ngIf="iconclass && (!path && !mda)">
  <em [attr.class]="iconclass" [attr.title]="tooltip" (click)="onImageClick($event)"></em>
  <label class="image-title" *ngIf="title" (click)="onImageClick($event)" style="cursor: pointer">{{title}}</label>
</ng-container>

<!--Material icon-->
<ng-container *ngIf="(iconclass && mda) && !path">
  <em [attr.class]="iconclass" [attr.title]="tooltip" (click)="onImageClick($event)">{{mda}}</em>
</ng-container>

<ng-container *ngIf=" title && !iconclass">
  <span style="font-size: medium">{{title}}</span>
</ng-container>
