reactjsfluent-ui

Icon is not visible in PivotItem in fluent ui

I am creating a view using fluent in react. I used to pivot to display the top navigation but the icon in the tab is not visible even on using the itemIcon property in the PivotItem.

This is the code snippet I used

return <div>
        <Pivot>{
            headerItems.map( (item: IHeaderItem) => (
                <PivotItem itemKey = {item.id} headerText = {item.name} itemIcon="Globe">
                </PivotItem>
            ))
        }
        </Pivot>
    </div>

enter image description here

Solution

  • By default, the font-based Fluent UI icons are not added to your bundle or loaded on the page, in order to save bytes for scenarios where you don't care about icons, or you only care about a subset.

    To make the icons available, you may initialize them as follows. Note that initializeIcons() should only be called once per app and must be called before rendering any components. This is typically done in the app's top-level file just before the main ReactDOM.render() call.

    import { initializeIcons } from '@fluentui/react/lib/Icons';
initializeIcons();