form-field(outline): placeholder animation with matPrefix icon not moving to the top left border

What is the expected behavior?
When clicking on the input, The placeholder should move to the top left side of the border.

https://material.io/design/components/text-fields.html
In the link above, Choose OUTLINED and check the following options : 'Leading icon' and 'Trailing icon'
Click on the placeholder and it will move to the top left side correctly,

What is the current behavior?
Currently when there is a matPrefix mat-icon and the appearance is 'outline', When clicking on the input field, The placeholder goes to the top of the field but not to the left (probably because of the icon).

What are the steps to reproduce?
https://stackblitz.com/angular/ygjnerlpdko?file=src%2Fapp%2Fform-field-appearance-example.html

On the html file, Change the 3rd input from matSuffix to matPrefix and click on the placeholder

Which versions of Angular, Material, OS, TypeScript, browsers are affected?
I'm on Chrome 78.0.3904.108 , Windows10, AngularCLI 8.3.3, Material 8.2.3

Is there anything else we should know?

Bắt đầu với bản tái hiện StackBlitz được liên kết và entry point src/app/form-field-appearance-example.html của nó; thay đổi input thứ ba từ matSuffix thành matPrefix với outline appearance và tái hiện chuyển động của placeholder. Truy vết hành vi outline của Angular Material form-field đối với biểu tượng tiền tố. Hoàn tất khi placeholder đang được focus di chuyển lên viền trên bên trái trong khi biểu tượng matPrefix vẫn được định vị chính xác.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.