cssreactjsicon-fonts

Some Tabler font icons appearing filled

I am trying to use Tabler icons in my project React typescript project via classNames and for some unknown reasons, some icons appear filled. Please note that my CSS skills are not so good.

The library comes with

  1. Font icons
  2. PNG icons
  3. And SVG icons

When I check the font iconsFont icons some icons appear completely filled and because of this when I try to access them like className="ti ti-discount" I get icons that look likeFont icon when used while the SVG and PNG counterparts look like SVG and PNG counterparts, am confused, how can I resolve this?

Solution

  • For anyone who sees this question, the poster created a GitHub issue here: https://github.com/tabler/tabler-icons/issues/102. According to the project's maintainer, the problem should be solved in the near future (I'd guess early 2021): https://github.com/tabler/tabler-icons/pull/92.