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} />} />

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} /> } />

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>} />

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} />} />