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

<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>

const privateTestcases = question.testcasesPrivate!.map((testcase, index) => (
      <div>{this.autograderCard(privateTestPath, index)}</div>
    ));

    return (
      <div>
        Public Testcases
        {publicTestcases}
        {controlButton('New public testcase', IconNames.PLUS, this.addTestcase(question.testcases))}
        <br>
        <br>
        Private Testcases
        {privateTestcases}
        {controlButton(
          'New private testcase',
          IconNames.PLUS,
          this.addTestcase(question.testcasesPrivate!)
        )}
      </div>
    );
  }

const resetLibrary = controlButton('Use this Library', IconNames.REFRESH, () =>
      this.props.handleRefreshLibrary(deployment)
    );

    const symbolsFragment = (
      
        External Library:
        <br>
        {externalSelect(deployment.external.name, this.handleExternalSelect!)}
        
        <div>Symbols:</div>
        <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></div>

onChange={this.handleFilterChange}
            />
            <div style="{{">
              
            </div>
            {this.props.handleCreateMaterialFolder &amp;&amp; (
              <div style="{{">
                {controlButton('Add New Folder', IconNames.PLUS, this.handleOpenDialog)}
              </div>
            )}
            {this.props.handleCreateMaterialFolder &amp;&amp; (
              <dialog title="Add New Folder">
                <div>
                  </div></dialog>

function renderTierAdder() {
    const { rule, tiers } = props;
    if (Object.keys(rule.tieredReplicants || {}).length >= Object.keys(tiers).length) return;

    return (
      
        <button>
          Add a tier
        </button>
      
    );
  }

className={Classes.INPUT}
              value={newEnvName}
              onChange={this.handleNewNameChange}
            />
          
          
            <input value="{newEnvValue}">
          
          <button disabled="{this.shouldDisableAddNewEnvButton()}" style="{{" type="button">
        
      
    )
  }
}</button>

<span>
              <button start="" disabled="{start">= maxStart} onClick={this._onShiftPlus} icon={IconNames.CHEVRON_RIGHT}/&gt;
            
          
          <div>
            <span>{formatTimeLong(end)}</span>
            <span>
              </span></div></button><button disabled="{!this.props.onRemove}">
            
          
        
        <textarea rows="6" value="{text}">        &lt;div className='subtitles-split row'&gt;
          &lt;p&gt;{formatTimeLong(audioTime)}&lt;/p&gt;
          &lt;span className='pull-right'&gt;
            &lt;Button small disabled={offset === 0 || audioTime &lt; start} onClick={this._onInsertBelow} icon={IconNames.PLUS}/&gt;
          &lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  componentDidMount () {</textarea></button></span>

render(): JSX.Element {
    const { lookupsError, hiddenColumns } = this.state;

    return (
      <div>
        
           this.lookupsQueryManager.rerunLastQuery(auto)}
            localStorageKey={LocalStorageKeys.LOOKUPS_REFRESH_RATE}
          /&gt;
          {!lookupsError &amp;&amp; (
            <button> this.openLookupEditDialog('', '')}
            /&gt;
          )}
          
              this.setState(prevState =&gt; ({
                hiddenColumns: prevState.hiddenColumns.toggle(column),
              }))
            }
            tableColumnsHidden={hiddenColumns.storedArray}
          /&gt;
        
        {this.renderLookupsTable()}
        {this.renderLookupEditDialog()}</button></div>

onSave={this.save}
        historyRecords={historyRecords}
      >
        <p>
          Druid uses rules to determine what data should be retained in the cluster. The rules are
          evaluated in order from top to bottom. For more information please refer to the{' '}
          
            documentation
          
          .
        </p>
        {(currentRules || []).map(this.renderRule)}
        
          <button>
            New rule
          </button>
        
        {!currentRules.length &amp;&amp; datasource !== '_default' &amp;&amp; (
          <p>
            This datasource currently has no rules, it will use the cluster defaults (
            <a>edit cluster defaults</a>)
          </p>
        )}
      
    );
  }
}

const publicTestPath = ['questions', this.props.questionId, 'testcases'];

    const publicTestcases = question.testcases.map((testcase, index) => (
      <div>{this.autograderCard(publicTestPath, index)}</div>
    ));

    const privateTestPath = ['questions', this.props.questionId, 'testcasesPrivate'];
    const privateTestcases = question.testcasesPrivate!.map((testcase, index) =&gt; (
      <div>{this.autograderCard(privateTestPath, index)}</div>
    ));

    return (
      <div>
        Public Testcases
        {publicTestcases}
        {controlButton('New public testcase', IconNames.PLUS, this.addTestcase(question.testcases))}
        <br>
        <br>
        Private Testcases
        {privateTestcases}
        {controlButton(
          'New private testcase',
          IconNames.PLUS,
          this.addTestcase(question.testcasesPrivate!)
        )}
      </div>
    );
  }