mat-icon: mat-icon doesn't fully support outlined, rounded, sharp and two tone

#### Feature Description

Current implementation of `mat-icon` is incomplete, we can only use icons of filled style. We need a way to easily use outlined, rounded, sharp and two tone variant of material icons, something looking like:
```html

```

#### Use Case

Currently, using outlined, rounded, sharp and two tone variant of material icons is really inconvenient. We need to use some workaround, like
```javascript
@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
```
```html
home
```
which is discussed in https://github.com/angular/components/issues/11544, and this method does not make use of `mat-icon`, as it's a general web solution to use oulined icons.

Bắt đầu bằng việc xem xét triển khai hiện tại của mat-icon và phần thảo luận liên quan trong issue 11544. Xác nhận cách các biểu tượng filled hiện được chọn, sau đó xác định cách các biến thể outlined, rounded, sharp và two-tone sẽ được cung cấp thông qua mat-icon; được xem là hoàn thành khi mỗi biến thể được yêu cầu hoạt động mà không cần workaround CSS đã được ghi lại.

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