reactjsprimereactreact-icons

PrimeReact in combination with react-icons


I was wondering if it is somehow possible to use the icons from the react-icons package in PrimeReact, since the primeIcons package unfortunately does not contain all the icons I need for my project.

I haven't found a solution for this, because react-icons exports the icons as components and PrimeReact gets the icons assigned by string.


Solution

  • To change say search icon in a button

    you can access https://react-icons.github.io/react-icons/search?q=fasearch

    right click on the icon and inspect the elements, copy the SVG for the same from the developer console
    create say search.svg file and paste the svg for fasearch in the file add below class in say root.css file

    .pi-search:before {
      content: url(search.svg) !important;
    }
    

    This will change the search icon