How to change mat-icon stroke width

Question

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)

Answer 1

Finally found a solution

1. Go over the google icons website
2. Make the adjustment the way you like it
3. Select any icon
4. In the right side, you'll have the "Static icon font" shown like this
5. Copy the url
6. Past it in your browser
7. It will show you the @font-face to be using
8. Past those information, as follow, in your app

@font-face {
  font-family: 'Material Icons Outlined'; // Add Outlined if needed
  font-weight: 200; // The choosen font-weight
  font-style: normal;
  src:
    local('Material Icons Outlined'), // Add Outlined if needed
url('https://fonts.gstatic.com/s/materialsymbolsoutlined/v166/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDAvHOejbd5zrDAt.woff2') format('woff2');
  font-display: fallback;
}

Use it locally for faster load

In case you're having an app and which to have it instant load (I'm talking about hybrid app)

1. Copy the url in your browser https://fonts.gstatic.com/s/materialsymbolsoutlined/v166/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDAvHOejbd5zrDAt.woff2
2. This will download the file in your laptop
3. Move the font in your asset forlder
4. Change the target url ->

  src:
    local('Material Icons Outlined'), // Add Outlined if needed
    local('MaterialIconsOutlined-Light'), // My file name
    url('/assets/fonts/MaterialIconsOutlined-Light.woff2') format('woff2');

6. Should work just fine

Cheers