How do I dynamically reference a material-icon for a material-tooltip-card?

[sigi77]

I'm creating table rows in with an *ngFor. For certain students I would like to show an icon that shows a material-tooltip-card when hovered over it. Is there a way I can dynamically change #ref1?

`<tr ngFor="let student of course.students ;[routerLink]="studentUrl(student.externeDatenbankID.toString())"> <td ngIf="hasWarning"> <div *ngIf="student.spezialfallProtokolle.length>0"> <material-icon icon="error_outline" tooltipTarget tabIndex="0" keyboardOnlyFocusIndicator size="medium"

ref1="tooltipTarget">

        </material-icon>
        <material-tooltip-card [for]="ref1" focusContents>
           Content for {{student.name}}
        </material-tooltip-card>
    </div>
</td>

`

Because all icons now have the same reference the tooltip-card flips between all instances when hovered over the icon.