I have a requirement to display the count (actually, the count of active notifications) on the icon in SPFX extensions.

I have the count. I am using React UI Fabric Icon control. Is there any property to display count on icon?

Here is my control code:

<Icon iconName="MailAlert" title={Constants.onHoverAlerts} style{{cursor:"pointer",float:"right",paddingRight:"2px",marginTop:"2px",color:'black',fontSize:"25px"}} onClick={this.openPopup}></Icon> 

Please help me on this.

1 Answer 1


I think Icon control has not offered this kind of functionality. You can add badge number by means of other libraries.

  • https://material-ui.com/components/badges/

    <Badge badgeContent={8} color="secondary" anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}>
         <Icon title="myicon" iconName="MailAlert" className={iconClass}/>
       <Badge badgeContent={4} color="primary">

enter image description here


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.