Tabler Icons not respecting stroke-width

[stramel]

When using icon from the Tabler collection, they don't respect setting stroke-width on the svg tag. This is a functionality that works on the actual Tabler icon set.

Here is the documentation stating to use stroke-width on the svg to change the width. https://github.com/tabler/tabler-icons#inline-html

Here is a CodePen demonstrating the incorrect functionality on Iconify's Icons. CodePen

[cyberalien]

That's normal behaviour.

Iconify is designed to work with any icon set and any framework. To make that work, svg tag doesn't have any default values, such as fill or stroke-width or whatever else is used, those attributes are moved down to shapes that use them (or assigned to g element that groups all child elements if there is more than one shape).

To change stroke-width, don't target svg element, target elements inside svg:

svg [stroke-width="2"] {
  stroke-width: 1;
}

[stramel]

@cyberalien I would agree however that's not how these icons were designed. To state that "Iconify is designed to work with any icon set" but not support the icon set as it was designed would indicate that it doesn't work with any icon set.

Using the Tabler icons directly with setting stroke-width on the svg tag works but doesn't in the Iconify since stroke-width has been shifted down to the path.

[cyberalien]

Doesn't matter how those icons were designed. There are hundreds of icon sets, each one was designed in its own specific way.

Some will tell you to use fill to change color. Some use currentColor, so they use text color. Some use stroke. Would you use icon set specific way to change color? No, with Iconify all icons are changed to use currentColor, so you can change color for any icon in consistent way.

Same with stroke-width. If icon is using stroke-width, target shapes that have stroke-width attribute. Doesn't matter what icon set icon is from, code is the same for every icon set that uses stroke-width.

By using stroke-width on svg element, as suggested in Tabler docs, you cannot target shapes inside icon. What if another icon uses stroke-width on actual shape that draws it, such as on path tag? Your code won't work for that icon.

By removing all extra attribute from svg element, with Iconify you can work with all icons in exactly the same way, regardless of icon set. So if icon set stroke-width, you target shapes that use it, not svg element. It might be set on group element to avoid duplication, but stylesheet is still the same, targeting elements inside svg, not svg element.

With Iconify:

• Want to change color? svg { color: red; }, not fill, not stroke.
• Want to change stroke width? svg [stroke-width="2"] { stroke-width: 1.5 }, works with all icons that have that use shapes with stroke width, regardless of icon set.