How to change mat-icon stroke width

user_11135174 0
Viewed 1830

I use custom icon with the default mat-icon with angular. Yet, the mat icon are a bit too thick compared to the one I've created.

I know those icons are treated like fonts, but is it somehow possible to change it like we change the stroke from an svg?

Example

The manage_accounts icon will have the same thickness as the glob
(I'm using the class="material-icons-outlined" to have the outlined version of the logo)

enter image description here

mat-icon angular-material angular
1 Answers

mat-icon are fonts, I'm not sure in angular but you can try style them using the following properties:

.classname_of_the_icon{
     font-weight: 100 !important; // any weight you want your icon to be [bold, normal, 100, 200, ..., 800]
     font-size: 12px !important; // any size you want your icon to be
}

The !important; allows us to override default mat-icon styles, Let me know if it works Good Luck

user_129258310
Related