bug(MatChip): mat-chip-avatar with an image is not working correctly in Chrome

[KlausHans]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/angular-3vp4xw?file=src/app/chips-autocomplete-example.html

Steps to reproduce:

1. Open Stackblitz in Firefox -> everything is fine
2. Open Stackblitz in Chrome -> the image in the mat-chip-avatar is not scaled and overflows. The layout is messed up.

Expected Behavior

What behavior were you expecting to see?
I expect the view in Chrome like i have in Firefox -> The image in the mat-chip-avatar is scaled correctly

Actual Behavior

What behavior did you actually see?
In Chrome the image in the mat-chip-avatar is not scaled and overflows. The layout is messed up.

Environment

"@angular/animations": "^10.0.2",
"@angular/cdk": "^10.0.1",
"@angular/common": "^10.0.2",
"@angular/compiler": "^10.0.2",
"@angular/core": "^10.0.2",
"@angular/forms": "^10.0.2",
"@angular/material": "^10.0.1",
"@angular/material-moment-adapter": "^10.0.1",
"@angular/platform-browser": "^10.0.2",
"@angular/platform-browser-dynamic": "^10.0.2",
"@angular/router": "^10.0.2",

• Browser(s): Chrome Version 83.0.4103.116 (Offizieller Build) (64-Bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows, should not matter

[KlausHans]

Workaround: set css on the img-Tag:

  width: inherit;
  height: inherit;
  object-fit: cover;

https://stackblitz.com/edit/angular-3vp4xw-34uuru?file=src%2Fapp%2Fchips-autocomplete-example.css

[crisbeto]

It's because you have to set the image itself as the avatar. E.g. <img src="..." matChipAvatar>.

[KlausHans]

Ah, thank you very much, works. Didn't found it in the doku though.

[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.}