Why do my Angular Material Icons look different from Google Fonts Icons?

I'm working on an Angular 15 project, and I've noticed that the mat-icon components I'm using look different from the icons displayed on the Google Fonts Icons website (https://fonts.google.com/icons). For example, I'm using the following code to include the "upload" icon in my project:

<mat-icon>upload</mat-icon>

To load the icons, I've added the following line to my index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

However, the icon rendered in my application doesn't match the design shown on the Google Fonts Icons site.

The icon as it appears in my Angular project:

The icon as it appears on the Google Fonts Icons website:

I'm wondering why there is a difference in appearance. Is there something I'm missing in how I include or configure the icons in Angular Material?

There are two different versions of the Material Icon Font, which you can select in the Google Fonts site under the "Style" section in the sidebar:

1. Material Symbols
2. Material Icons

In your app, you are using the Material Icons, which may look different than the icons from Material Symbols. There is an open feature request for official Material Symbols support in Angular Material.