Source: https://primereact.org/customicons/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7

Custom Icons

PrimeReact components can be used with any icon library using the templating features. Icons are passed the iconProps of the original icon and the props of the component.

Material#

Material icons is the official icon library based on Google Material Design.

import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

<Dropdown dropdownIcon={(options) => <ArrowDropDownIcon {...options.iconProps} />} />

Copy

Font Awesome#

Font Awesome is a popular icon library with a wide range of icons.

// use the CSS style directly
<Dropdown dropdownIcon="fa-light fa-chevron-down" />

// use the pre-built icons
<Dropdown dropdownIcon={(options) => <FontAwesomeIcon icon={["fal", "chevron-down"]}  {...options.iconProps} /> } />

Copy

SVG#

Inline SVGs are embedded inside the DOM.

<Dropdown dropdownIcon={(options) => 
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...options.iconProps}>
        <g id="chevron-down">
            <path d="M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z"/>
        </g>
    </svg>} />

Copy

Image#

Any type of image can be used as an icon.

<Dropdown dropdownIcon={(options) => <img alt="dropdown icon" src="/icons/arrow_down.png" {...options.iconProps} />} />

Copy

Material
Font Awesome
SVG
Image

PrimeReact 10.9.7 by PrimeTek