A control must be associated with a text label

That message actually comes from the control-has-associated-label rule.

The rule is triggered by the role="button" attribute. That turns your <i /> into a control, so it needs a text label for accessibility reasons (so screen readers know what to read out, for example). To comply with the rule, you can either give the "button" textual content or add an aria-label attribute:

<i
   role="button"
   className={classN}
   onClick={this.muteVolume}
   onKeyDown={this.muteVolume}
>
  Mute volume
</i>

<i
   role="button"
   aria-label="Mute volume"
   className={classN}
   onClick={this.muteVolume}
   onKeyDown={this.muteVolume}
 />