iWuzzler/src/app/user-profile/profile-photo/profile-photo-upload/profile-photo-upload.component.html

<div class="profile-photo-upload-container" style="margin-bottom: 40px;">
    <!-- Hidden file input for styling purposes -->
    <input type="file" #fileInput hidden (change)="onFileSelected($event)" accept="image/*">
        <div class="upload-container">
        <button *ngIf="!currentUser?.photoUrl" (click)="fileSelected ? uploadFile() : fileInput.click()" class="image-upload-button">
            <mat-icon>{{ fileSelected ? 'upload_file' : 'image' }}</mat-icon>
        </button>
        <button *ngIf="currentUser?.photoUrl" mat-fab (click)="deleteFile()" class="close-icon-button">
            <mat-icon>close</mat-icon>
        </button>
    </div>
</div>