I´m trying to change the thickness of the svg icon (I need to make the stroke of the icon thinner). The icon in my project is defined as solid (fas) with no way to change it to regular or other (far) due to the fact that my icon is not existing in free-regular-svg-icons in node_modules. Therefore I am trying to find a solution to change the thickness of the icon with the css. So far I haven´t came across any working solution so if you have any suggestion, I would really appreciate it a lot.
Here is the html in dom structure:
<fa-icon class="ng-fa-icon" ng-reflect-title="Pencil" ng-reflect-icon="fas,pencil-alt" title="Pencil">
<svg role="img" data-icon="pencil" class="svg-inline--fa fa-pencil">
<title id="svg-inline--fa-title-HaUt4gdrmqeA">Pencil</title>
<path fill="currentColor" d="..."></path>
</svg>
</fa-icon>
Here is the css I tried, but is not affecting the thickness of the icon stroke:
fa-icon > svg > path {
stroke: black !important;
stroke-width: 1px !important;
}
FontAwesome icons usually use a rather large viewBox like 512x512 user units.
That's why your stroke-width of 1px is almost invisible.
Keep in mind: these icons are drawn as solid shapes – so they don't have any strokes.
The only thing you can do to mimic a decreased thickness is to add e.g a white stroke.
Unfortunately, you can't use a transparent stroke to decrease the visible thickness of you icon.
So you could simply try to increase the stroke-width like so:
body{
background:#ccc;
}
svg{
width:20em;
overflow: visible;
}
fa-icon > svg > path {
fill:red;
stroke: #fff!important;
stroke-width: 5%!important;
}<fa-icon class="ng-fa-icon" ng-reflect-title="Pencil" ng-reflect-icon="fas,pencil-alt" title="Pencil">
<svg role="img" data-icon="pencil" class="svg-inline--fa fa-pencil" viewBox="0 0 512 512">
<title id="svg-inline--fa-title-HaUt4gdrmqeA">Pencil</title>
<path fill="currentColor" d="M495.6 49.23l-32.82-32.82C451.8 5.471 437.5 0 423.1 0c-14.33 0-28.66 5.469-39.6 16.41L167.5 232.5C159.1 240 154.8 249.5 152.4 259.8L128.3 367.2C126.5 376.1 133.4 384 141.1 384c.916 0 1.852-.0918 2.797-.2813c0 0 74.03-15.71 107.4-23.56c10.1-2.377 19.13-7.459 26.46-14.79l217-217C517.5 106.5 517.4 71.1 495.6 49.23zM461.7 94.4L244.7 311.4C243.6 312.5 242.5 313.1 241.2 313.4c-13.7 3.227-34.65 7.857-54.3 12.14l12.41-55.2C199.6 268.9 200.3 267.5 201.4 266.5l216.1-216.1C419.4 48.41 421.6 48 423.1 48s3.715 .4062 5.65 2.342l32.82 32.83C464.8 86.34 464.8 91.27 461.7 94.4zM424 288c-13.25 0-24 10.75-24 24v128c0 13.23-10.78 24-24 24h-304c-13.22 0-24-10.77-24-24v-304c0-13.23 10.78-24 24-24h144c13.25 0 24-10.75 24-24S229.3 64 216 64L71.1 63.99C32.31 63.99 0 96.29 0 135.1v304C0 479.7 32.31 512 71.1 512h303.1c39.69 0 71.1-32.3 71.1-72L448 312C448 298.8 437.3 288 424 288z"></path>
</svg>
</fa-icon>If you need to change stroke width you might better opt for an icon library like feather icons, since all icons consist of strokes.