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

const overview = this.props.assessmentOverviews.filter(a => a.id === assessmentId)[0];
      const assessmentProps: AssessmentProps = {
        assessmentId,
        questionId,
        notAttempted: overview.status === AssessmentStatuses.not_attempted,
        closeDate: overview.closeAt
      };
      return ;
    }

    // Otherwise, render a list of assessments to the user.
    let display: JSX.Element;
    if (this.props.assessmentOverviews === undefined) {
      display = } />;
    } else if (this.props.assessmentOverviews.length === 0) {
      display = ;
    } else {
      /** Upcoming assessments, that are not released yet. */
      const isOverviewUpcoming = (overview: IAssessmentOverview) =>
        !beforeNow(overview.closeAt) && !beforeNow(overview.openAt);

      const upcomingCards = this.sortAssessments(
        this.props.assessmentOverviews.filter(isOverviewUpcoming)
      ).map((overview, index) =>
        this.makeOverviewCard(overview, index, !this.props.isStudent, false)
      );

      /** Opened assessments, that are released and can be attempted. */
      const isOverviewOpened = (overview: IAssessmentOverview) =>
        !beforeNow(overview.closeAt) &&
        beforeNow(overview.openAt) &&
        overview.status !== AssessmentStatuses.submitted;

const renderIcon = (category: AssessmentCategory) => {
          switch (category) {
            case AssessmentCategories.Mission:
              return IconNames.FLAME;
            case AssessmentCategories.Sidequest:
              return IconNames.LIGHTBULB;
            case AssessmentCategories.Path:
              return IconNames.PREDICTIVE_ANALYSIS;
            case AssessmentCategories.Contest:
              return IconNames.COMPARISON;
            default:
              // For rendering hidden assessments not visible to the student
              // e.g. studio participation marks
              return IconNames.PULSE;
          }
        };

}
                interactionKind={PopoverInteractionKind.HOVER}
                hoverOpenDelay={0}
                hoverCloseDelay={200}>
              <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>
          
          
          
            }
                interactionKind={PopoverInteractionKind.HOVER}
                hoverOpenDelay={0}
                hoverCloseDelay={200}&gt;
              <button>Console</button>

const NavigationBar: React.SFC = props => (
  
    
      
        
        <div>Missions</div>
        
      

      
        
        <div>Quests</div>

export const AssessmentOverviewCard: React.SFC = props => {
  const questionId = props.questionId === undefined ? 0 : props.questionId
  if (props.assessmentOverviews === undefined) {
    return } />
  } else if (props.assessmentOverviews.length === 0) {
    return 
  }
  const cards = props.assessmentOverviews.map((overview, index) => (
    <div>
      
        <div>PICTURE</div>
        <div>
          <div>
            <h4>{overview.title}</h4>
          </div>
          <div>
            <h6>Mission 0 : 123123 XP (hardcoded)</h6>
          </div>
          <div>
            <p>{overview.shortSummary}</p>
          </div>
          <div></div></div></div>