4

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

Raphaël Balet
  • 6,334
  • 6
  • 41
  • 78

2 Answers2

5

After my research, I found out only these things.

All material icon is Google fonts, so you can change the size and stroke by using CSS properties font-size and font-weight, but there are some limitations.

If you are using Angular Material (mat-icon).

In that way, if you open index.html you will find there:

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

that font-family provides only font-weight: normal (400), so you can't change its weight to less than 400.

So the way to use, for ex: font-weight: 200, is refuse to use <mat-icon></mat-icon> and replace it with material icons https://fonts.google.com/icons.

All that you need is to replace in index.html link to fonts you want to use and provide a font-weight parameter wght@200

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@200" />

And then in your component change implementation to

<span class="material-symbols-outlined">invert_colors</span>

So in that way of implementation, you will have a thinner icon that you can resize with the font-size property.

Also, you can pass more parameters to the font link, more details here: https://developers.google.com/fonts/docs/material_symbols

And in case when you register a custom svg then inside mat-icon will be your svg, then you can try to add stroke and stroke-width properties.

<mat-icon style="stroke-width: 0.1; stroke: aqua" [svgIcon]="'custom-svg'"></mat-icon>
Denis Golubev
  • 96
  • 1
  • 6
  • Damn, thx a lot for the detailed answer, +1 already for the research. I wont be testing what you wrote, since it's for me a requirement to use `mat-icon`, but since it does exists in the frame of the google font, it will surely exists in the `mat-icon` library in the future. Thx a lot though, will mark this as accepted answer till we find a better solution :) – Raphaël Balet Nov 02 '22 at 14:33
  • Tnx) Hope that really saves some time for someone. – Denis Golubev Nov 02 '22 at 14:40
0

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

crispengari
  • 7,901
  • 7
  • 45
  • 53
  • It work for the `font-weight: 600` and does make the icon thicker! but sadly it isn't working to make then thinner... – Raphaël Balet Mar 18 '21 at 12:10
  • try the `font-weight` that is less probably 100 and don't forget to use `!important`-good luck if you find this helpufull vote for the answer – crispengari Mar 18 '21 at 14:34
  • I did the way you explained and it did not worked. I've tried every possible size. But was worth trying it. – Raphaël Balet Mar 18 '21 at 14:51
  • @JulianoVargas No, sadly not. But be sure I'll post my answer if I do. Also, I had to create a new library with my own icons that I then import and use with mat-icon... Also, think about upvoting the question if an answer to it would help you, it makes it more visible ;) – Raphaël Balet Jun 09 '22 at 11:12
  • Thanks @RaphaëlBalet, I have no option but ditch the icon and use symbols instead which is customisable ref: https://fonts.google.com/icons?icon.query=home&icon.set=Material+Symbols – Juliano Vargas Jun 09 '22 at 12:53
  • @JulianoVargas Could be an Idea, but it doesn't seems to be ready yet from the angular perspective. – Raphaël Balet Jun 09 '22 at 15:45