How to use the @blueprintjs/icons.IconNames.PLAY function in @blueprintjs/icons

public render() {
    const RecorderPauseButton = controlButton('Pause', IconNames.PAUSE, this.handleRecorderPausing);
    const RecorderResumeButton = controlButton(
      'Resume',
      IconNames.PLAY,
      this.handleRecorderResuming
    );
    const RecorderStartButton = controlButton(
      'Record',
      IconNames.PLAY,
      this.handleRecorderStarting
    );
    const RecorderStopButton = controlButton('Stop', IconNames.STOP, this.handleRecorderStopping);
    const RecorderResetButton = controlButton(
      'Reset',
      IconNames.REFRESH,
      this.handleRecorderResetting
    );
    // const RecorderDownloadButton = controlButton(
    //   'Download',
    //   IconNames.DOWNLOAD,
    //   this.handleRecorderDownloading
    // );
    const RecorderSaveButton = (
      
        {controlButton('Save', IconNames.FLOPPY_DISK)}

render () {
    const {version, name, events, duration, waveform, unsaved, save, playerUrl, canSave} = this.props;
    return (
      <div>
        <label>
          <input value="{name||''}" placeholder="Name" type="text">
        </label>
        <label>
          } /&gt;
        </label>
        {/* list of available subtitles? */}
        <div>
          
          <div>
            <div>{"Version "}<b>{version}</b></div>
            <div>{"Duration "}<b>{formatTime(duration)}</b></div>
            <div>{"Number of events "}<b>{events.length}</b></div>
          </div>
        </div>
        <div style="{{textAlign:">
          <div>
            <button>
            </button><button disabled="{!canSave}">
          </button></div>
        </div></div>

break;
      case AssessmentStatuses.attempting:
        icon = IconNames.PLAY;
        label = 'Continue Attempt';
        break;
      case AssessmentStatuses.attempted:
        icon = IconNames.EDIT;
        label = 'Review Attempt';
        break;
      case AssessmentStatuses.submitted:
        icon = IconNames.EYE_OPEN;
        label = 'Review Submission';
        break;
      default:
        // If we reach this case, backend data did not fit IAssessmentOverview
        icon = IconNames.PLAY;
        label = 'Review';
        break;
    }
    return (
      
        {controlButton(label, icon, () =>
          this.props.handleAcknowledgeNotifications(filterNotificationsByAssessment(overview.id))
        )}
      
    );
  };

public render() {
    const RecorderPauseButton = controlButton('Pause', IconNames.PAUSE, this.handleRecorderPausing);
    const RecorderResumeButton = controlButton(
      'Resume',
      IconNames.PLAY,
      this.handleRecorderResuming
    );
    const RecorderStartButton = controlButton(
      'Record',
      IconNames.PLAY,
      this.handleRecorderStarting
    );
    const RecorderStopButton = controlButton('Stop', IconNames.STOP, this.handleRecorderStopping);
    const RecorderResetButton = controlButton(
      'Reset',
      IconNames.REFRESH,
      this.handleRecorderResetting
    );
    // const RecorderDownloadButton = controlButton(
    //   'Download',
    //   IconNames.DOWNLOAD,

public render() {
    return (
      <div>{controlButton(`${this.props.data.title}`, IconNames.PLAY, this.handleSelect)}</div>
    );
  }

actions.push(
        {
          icon: IconNames.MULTI_SELECT,
          title: 'Go to datasource',
          onAction: () => goToDatasource(id),
        },
        {
          icon: IconNames.CLOUD_UPLOAD,
          title: 'Open in data loader',
          onAction: () => goToLoadData(id),
        },
      );
    }
    actions.push(
      {
        icon: supervisorSuspended ? IconNames.PLAY : IconNames.PAUSE,
        title: supervisorSuspended ? 'Resume' : 'Suspend',
        onAction: () =>
          supervisorSuspended
            ? this.setState({ resumeSupervisorId: id })
            : this.setState({ suspendSupervisorId: id }),
      },
      {
        icon: IconNames.STEP_BACKWARD,
        title: 'Reset',
        intent: Intent.DANGER,
        onAction: () => this.setState({ resetSupervisorId: id }),
      },
      {
        icon: IconNames.CROSS,
        title: 'Terminate',
        intent: Intent.DANGER,

public render() {
    return (
      
        {this.renderConfigEditor()}
        {this.renderPipelineRunss()}
        
          
        
      
    );
  }
}

<button disabled="{this.props.disconnected}">
              Upload
            </button>
            <button disabled="{this.props.disconnected}">
              Download
            </button>
          
          
          
            }
                interactionKind={PopoverInteractionKind.HOVER}
                hoverOpenDelay={0}
                hoverCloseDelay={200}&gt;
              <button disabled="{this.props.disconnected}">Start</button>
            
            <button disabled="{this.props.disconnected}"> this.props.setMatch(Mode.IDLE)}
            &gt;
              Stop
            </button>
            <button disabled="{this.props.disconnected}"> this.props.setMatch(Mode.ESTOP)}
            &gt;
              Emergency
            </button>

<div>
              <h6>
                Expected Answer:
                
              </h6>
            </div>
            <div>
              <div>
                {controlButton('Test', IconNames.PLAY, () =&gt;
                  this.props.handleTestcaseEval(testcase)
                )}
                {controlButton('Delete', IconNames.DELETE, () =&gt;
                  this.removeTestcase(testcases, index)
                )}
              </div>
            </div>
          
        
      
    );
  };
}

className="reexecute"
        title="Use a persisting storage mode such as 'filesystem' to enable single step re-execution"
      >
        
      
    );
  }

  return (
     onReexecuteStep(stepKey)}
    >
      
    
  );
}