Angular: display an icon instead of a text

Issue

Let's say I have a component.ts like this:

@Input() studentHeader?: BaseStudent;

 get studentText() {
        if(this.studentHeader) {
            return this.studentHeader.nr + ' - ' +
                this.studentHeader.firstname + ' ' +
                this.studentHeader.lastname + ' ' +
                this.studentHeader.gender + ' ' +
        }

        return '';
    }

        get iconStudent() {
            let icon = null;
            if (this.studentHeader) {
                switch (this.studentHeader) {
                        case (this.studentHeader.gender === 'FEMALE') :
                            icon = 'icon_female_i.svg';
                            break;
                        case (this.studentHeader.gender === 'MALE') :
                            icon = 'icon_male_i.svg';
                            break;
            }
            return icon;
        }
}

and I have a HTML template like this:

<div class="h-header">
    <div class="h-header-left">
        <div class="iconStudent"></div>
        {{studentText}}<br>
    </div>

After compiling this, it leads to the following:

1 - John Doe MALE

, thus only the text appears and not the respective icon. But how is it possible to display the icon instead?

Solution

This might work!

    <div class="h-header-left">
        <img [src]="iconStudent" />
        {{studentText}}<br>
    </div>

Answered By - Naren Murali