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:
- Material Symbols
- 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.
- Confirm password validation in angular
- Avoid referencing unbound methods which may cause unintentional scoping of `this` error when calling static methods
- Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays
- How to Create a specific version of Angular Project using CLI?
- Angular how to use slicePipe in the new @for loop
- How to add unit tests for Signal Queries?
- Integratin CalHeatMap into Anguar app with SSR
- How to prevent the border radius from disortion when decreasing the height?
- Angular WebComponent instances is getting created multiple times
- How to use async function to await user input from onClick?
- Angular SSR complains about non-ESM modules in my Express API code
- Angular - react to changes in rxResource()
- I get "Http failure response for (unknown url): 0 Unknown Error" instead of actual error message in Angular
- Angular 17 does not post and i get an TypeError in dev console
- Angular 5 component testing select and triggered event
- How to observe touched event on Angular 2 NgForm?
- How to check whether <ng-content> is empty? (in Angular 2+ till now)
- How to accept only predefined values in an Angular @Input
- NavLink in React JS not working as expected?
- Can't modify inner content of ViewContainerRef, only adding tags after it in Angular
- Override User Agent Styling for Auto fill input fields
- Module not found: Error: Can't resolve 'class-transformer/storage' - Angular Universal / NestJs
- Angular 4 - Failed: Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?)
- How should I reference different files for different devices using Angular?
- Can't access a field of an object in TypeScript by using a variable as a name of the index unless declared as a constant
- Angular 16 Signal update doesn't update view
- class is a standalone component, which can not be used in the `@NgModule.bootstrap` array in Angular
- Is there a way to set a default value to signal's rxResource() such as signal()
- How to generate dynamic metadata from an Angular component using node js?
- Where is 'new BrowserWindow()' in Angular Electron application