I am trying to create a form in React JS using Fluent UI but the thing I noticed is that in the date picker I am missing all the icons

Question

I am trying to create a simple form in React JS using Fluent UI but the thing I noticed is that in the date picker I am missing all the icons when rendered. Here is my code, can anyone help me out what I am missing.

import React from "react";
import "./App.css";
import {
  DatePicker,
  defaultDatePickerStrings,
  Dropdown,
  PrimaryButton,
  TextField,
  Stack
} from "@fluentui/react";


function App() {

  const dropdownStyles = {
    dropdown: { width: 300 },
  };

  const options = [
    { key: "male", text: "Male" },
    { key: "female", text: "Female" },
  ];

  function _alertClicked() {
    alert("Clicked");
  }

  const columnProps = {
    tokens: { childrenGap: 15 },
    styles: { root: { width: 300 } },
  };

  return (
    <div>
      <h1>Employee Form</h1>
      <Stack {...columnProps}>
        <TextField label="Enter Name" />

        <DatePicker
          isRequired
          // firstDayOfWeek={firstDayOfWeek}
          label="Date of Birth"
          placeholder="Select a date..."
          ariaLabel="Select a date"
          strings={defaultDatePickerStrings}
        />

        <Dropdown
          isRequired
          placeholder="Select an option"
          label="Select Gender"
          options={options}
          styles={dropdownStyles}
        />

        <TextField label="Address" multiline rows={4} />
        <PrimaryButton text="Submit" onClick={_alertClicked} />
      </Stack>
    </div>
  );
}

export default App;

Here is the output Image. If you can focus on grey block in the top line of calendar the icons are missing.

Answer 1

You have to initialize icons in the root of your App:

import { initializeIcons } from '@fluentui/font-icons-mdl2';

initializeIcons();

More info here.