There is no alt attribute on <i> element. alt purpose is to provide text in case image can’t be displayed. And <i> is a text itself, doesnt make much sense to have alt on it.

Out of curiosity, when you converted from the <i> (which is a text formatting tag, similar to <strong>, like stated above), did you happen to do so as <img (your attributes)></img>? If so, that is most likely your error in the compilation of the component. <img> is a self closing tag. Try changing this;

  <i
    *ngFor="let tag of resultTags(result)"
    [class.video-icon]="tag == 'Video'"
    class="c-glyph"
    alt="{{ 'the article inside has video' }}"
  ></i>

to this;

  <img
    *ngFor="let tag of resultTags(result)"
    [class.video-icon]="tag == 'Video'"
    class="c-glyph"
    alt="{{ 'the article inside has video' }}"
  />

I am very new to angular and I am trying to make the video-icon to have alt text attribute and here’s the code:

<div class="search-result__indicators">
                    <i *ngFor="let tag of resultTags(result)"
                       [class.audio-icon]="tag == 'Audio'"
                       [class.image-icon]="tag == 'Image'"
                       class="c-glyph" role="presentation"></i>

                    <i *ngFor="let tag of resultTags(result)"
                       [class.video-icon]="tag == 'Video'"
                       class="c-glyph" alt="{{'the article inside has video'}}"></i>
</div>

However, it is giving me this error:

Can’t bind to ‘alt’ since it isn’t a known property of ‘i’. (“”
[class.video-icon]=”tag == ‘Video'”
class=”c-glyph” [ERROR ->]alt=”{{‘the article inside has video’}}”>

I have tried to change the i to img, and the error is gone, but somehow the application is not starting with the img changes. Any suggestion would be appreciated!