bug(mat-icon): Race-condition when using svgIcon

[OhadC]

Reproduction

https://stackblitz.com/edit/components-issue-o5txc8?file=src%2Fapp%2Fexample-component.ts

Steps to reproduce:

1. press the button

Expected Behavior

mat-icon should display "thumbs-up" icon

Actual Behavior

mat-icon is displaying "thumbs-down" icon

Environment

(doesn't really maters..)

• Angular: 9.0.2
• CDK/Material: 9.1.0
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

Explanation

There is a race-condition when svgIcon is getting a icon that is not already fetched.

Relevant code: https://github.com/angular/components/blob/master/src/material/icon/icon.ts#L229

Possible solutions

Option 1: Save this.svgIcon to fetchedSvgIcon before executing getNamedSvgIcon, and check if this.svgIcon === fetchedSvgIcon after getting the result
Option 2: Make this.svgIcon$ (observable of this.svgIcon) and use switchMap

[OhadC]

@crisbeto Looks great! Thanks!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}