How to use @blueprintjs/icons - 10 common examples

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,

private sideContentProps: (p: GradingWorkspaceProps, q: number) => SideContentProps = (
    props: GradingWorkspaceProps,
    questionId: number
  ) => ({
    handleActiveTabChange: props.handleActiveTabChange,
    tabs: [
      {
        label: `Grading: Question ${questionId + 1}`,
        iconName: IconNames.TICK,
        /* Render an editor with the xp given to the current question. */
        body: (
          
        ),

<br>
        {symbols}<table style="{{">
          <tbody></tbody>
        </table>
        {controlButton('New Symbol', IconNames.PLUS, this.handleNewSymbol)}
      
    );

    const globalsFragment = (
      
        <div>Globals:</div>
        <br>
        {globals}<table style="{{">
          <tbody></tbody>
        </table>
        {controlButton('New Global', IconNames.PLUS, this.handleNewGlobal)}
      
    );

    return (
      <div>
        {/* {deploymentDisp}
        <br> */}
        
        {resetLibrary}
        
        Interpreter:
        <br>
        {chapterSelect(deployment.chapter, this.handleChapterSelect)}
        
        {symbolsFragment}
        </div>

private makeOverviewCardButton = (overview: IAssessmentOverview) => {
    let icon: IconName;
    let label: string;
    switch (overview.status) {
      case AssessmentStatuses.not_attempted:
        icon = IconNames.PLAY;
        label = 'Attempt';
        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 (

render() {
    let address = 'team42.local';
    let status = 'Unknown', icon = IconNames.HELP, intent;
    switch (this.props.status) {
      case ConnectionStatus.HEALTHY:
        status = 'Healthy';
        icon = IconNames.TICK_CIRCLE;
        intent = Intent.SUCCESS;
        break;
      case ConnectionStatus.WARNING:
        status = 'Warning';
        icon = IconNames.WARNING_SIGN;
        intent = Intent.WARNING;
        break;
      // case ConnectionStatus.ERROR:
      //   status = 'Error';
      //   icon = IconNames.ERROR;
      //   intent = Intent.DANGER;
      //   break;

const makeGradingStatus = (gradingStatus: string) => {
  let iconName: IconName;
  let intent: Intent;
  let tooltip: string;

  switch (gradingStatus) {
    case GradingStatuses.graded:
      iconName = IconNames.TICK;
      intent = Intent.SUCCESS;
      tooltip = 'Fully graded';
      break;

    case GradingStatuses.grading:
      iconName = IconNames.TIME;
      intent = Intent.WARNING;
      tooltip = 'Grading in progress';
      break;

    case GradingStatuses.none:
      iconName = IconNames.CROSS;
      intent = Intent.DANGER;
      tooltip = 'Not graded yet';
      break;

    default:
      // Shows default icon if this assessment is ungraded
      iconName = IconNames.DISABLE;
      intent = Intent.PRIMARY;
      tooltip = `Not applicable`;
      break;

render() {
    let address = 'team42.local';
    let status = 'Unknown', icon = IconNames.HELP, intent;
    switch (this.props.status) {
      case ConnectionStatus.HEALTHY:
        status = 'Healthy';
        icon = IconNames.TICK_CIRCLE;
        intent = Intent.SUCCESS;
        break;
      case ConnectionStatus.WARNING:
        status = 'Warning';
        icon = IconNames.WARNING_SIGN;
        intent = Intent.WARNING;
        break;
      // case ConnectionStatus.ERROR:
      //   status = 'Error';
      //   icon = IconNames.ERROR;
      //   intent = Intent.DANGER;
      //   break;
      case ConnectionStatus.DISCONNECTED:
        status = 'Disconnected';
        icon = IconNames.SIGNAL_SEARCH;
        break;
    }
    return (
      
        
          {status} {this.props.status !== ConnectionStatus.DISCONNECTED &amp;&amp; <span></span>