Angular: display an icon instead of a text-CodePudding

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 >
    <div >
        <div ></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?

CodePudding user response：

This might work!

    <div >
        <img [src]="iconStudent" />
        {{studentText}}<br>
    </div>

CodePudding user response：

Try this

<div ><img [src]="iconStudent" /></div>