How to reduce width of outlined material icon?-CodePudding

Is there any way to make this icon look thinner? font-weight and stroke-width is not working.

.material-icons-outlined,
.material-icons.material-icons--outlined {
  font-family: 'Material Icons Outlined';
  font-size: 60px;
  font-weight:100;
  stroke-width: 0.1px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material Icons|Material Icons Outlined|Material Icons Two Tone|Material Icons Round|Material Icons Sharp">
</head>

<body>

  <section id="outlined">
    <h2>Outlined</h2>
    <i >assignment</i>
  </section>
  
</body>

</html>

CodePudding user response：

it is not possible to change the font weight. is icon pattern. you change the font size, reduce the icon size.. what the icon looks like with a smaller border

CodePudding user response：

You can use scale() OR scale(). (added two links just for reference)

The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).

Syntax

The scale() function is specified with either one or two values, 
which represent the amount of scaling to be applied in each direction.

scale(sx)

scale(sx, sy)

.material-icons-outlined,
.material-icons.material-icons--outlined {
  font-family: 'Material Icons Outlined';
  font-size: 60px;
  font-weight:100;
}

.icons_scale{
  transform: scale(0.5); 
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material Icons|Material Icons Outlined|Material Icons Two Tone|Material Icons Round|Material Icons Sharp">
</head>

<body>

  <section id="outlined">
    <h2>Outlined</h2>
    <i >assignment</i>
  </section>
  
</body>

</html>

UPDATE:

Actually, the stroke-width property is used to set the thickness of a line, text, or outline of an element inside the SVG tag. In this case, changing the font size will fix it.

CodePudding user response：

I think material-icons stroke width cannnot be modified. But instead we can use "material symbols", which can be modified.