Issues Using Fluent Icons in Storybook

[TheCodingCarlson]

My team and I are working on project that uses Storybook.js and we are running into issues getting icon components to render in stories. We are using initializeIcons() from @fluentui/react/lib/Icons. We have added it to our .storybook/preview.tsx file like so:

import type { Preview } from '@storybook/react';
import { initializeIcons } from '@fluentui/react/lib/Icons';
 
initializeIcons();
 
const preview: Preview = {
  parameters: { ... },
  decorators: [ ... ],
};

And then in our stories we are using the icons like so:

import { Add24Regular, ViewDesktop24Regular } from '@fluentui/react-icons';
 
export const PageHeaderWithCommandButtons: Story = {
  args: {
    title: 'Page Headline with CommandButtons',
    commandButtons: [
      <CommandButton
        {...{
          text: 'Add New',
          icon: <Add24Regular />,
          href: '#',
        }}
      />,
      <CommandButton
        {...{
          text: 'View All',
          icon: <ViewDesktop24Regular />,
          href: '#',
        }}
      />,
    ],
  },
};

However, this is not working. There are no errors being thrown, but the icons are not rendering for this story. Is there different guidance on how to use Fluent icon components in stories? Thanks!