ionicons icon indicating copy to clipboard operation
ionicons copied to clipboard

Stroke width inconsistency

Open dhruvkb opened this issue 5 years ago • 2 comments

The README.md file says that the default stroke width is 32px. But the arrow-forward-outline file has stroke width set to 48px.

dhruvkb avatar Jul 25 '20 01:07 dhruvkb

Adding to this ticket. There are a fair number of icons that either ignore the --ionicon-stroke-width setting altogether, or have inconsistent stroke widths as a result (mic-off, for example, honors the stroke width for the slash, but ignores it for the microphone).

This seems to be due to some of the rendered svgs missing the .ionicon-stroke-width classname from their nested elements (path, circle, etc).

Here is a quick (non-comprehensive) list of the icons I observed with this behavior:

  • all non-circle arrows
  • all non-circle chevrons
  • eye-off
  • flash-off
  • heart-dislike
  • finger-print
  • help
  • information
  • link
  • mic-off-circle
  • unlink
  • person-circle
  • people-circle
  • refresh-circle
  • volume-mute

There are others that ignore stroke width as well, but are more complicated than simply adding a class to them. cog, or earth, for example, would likely need rebuilt to honor the stroke width.

kaigon avatar Jun 16 '21 17:06 kaigon

This is due to the fact that numerous icons are rendered as path polygons with a fixed stroke width and filled rather than stroked. I detailed an explanation of why this is and potentially how to start to fix it for some icons (see https://github.com/ionic-team/ionicons/issues/923)

skamradt avatar Jul 20 '25 22:07 skamradt