Display count/number on icon in SPFX Extensions

Question

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.

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>
  
     <hr/>
  
     <Badge badgeContent={4} color="primary">
       <MailIcon/>
     </Badge>
  

BR