Close button not having "X" in Fluent UI

Question

I'm trying to create a TeachingBubble using Fluent UI. I want it to have close button, marked with "x". I'd like to have a closing button like in this example:

How can that be done in react, using Fluent UI?

My current code:

import { TeachingBubble } from "@fluentui/react";

interface IOnboardingProps {
  actionFunction?: () => void;
  closeFunction?: () => void;
}

const Onboarding2: React.FC<IOnboardingProps> = ({
  actionFunction = () => {},
  closeFunction = () => {},
}) => {
  return (
    <TeachingBubble
      headline="How to get started"
      hasCloseButton={true}
      closeButtonAriaLabel="Blabla"
      onDismiss={() => {
        console.log("Close button pressed.");
        closeFunction();
        console.log("Passed function done.");
      }}
      primaryButtonProps={{ children: "Done", onClick: () => actionFunction() }}
    >
      Some instructions
    </TeachingBubble>
  );
};

export default Onboarding2;

And this is what I get:

The close button exists but it doesn't have an "X". I thought "X" was added by default when "hasCloseButton" is set to true.

Answer 1

The reason why "x" icon was not rendered is because icons were not initialized. That's done by adding:

import { initializeIcons } from "@fluentui/react/lib/Icons";

initializeIcons();