font awesome icons or bootstrap icons

[mark wheeler]

Is it possible to use fontawesome icons or bootstrap icons with the IconCss property of menu items in SfMenu ?

I find the ones supplied in the demo to be incredibly basic and old fashioned, its actually putting me off using the menu

Ive used this example, are there any other options ?

https://blazor.syncfusion.com/documentation/menu-bar/icons

is there a list anywhere of all available icons for this example, the descriptions are very cryptic

[Keerthikaran Venkatachalam]

Hi mark,

Thank you for reaching out to Syncfusion Support.

We checked your reported query and prepared the sample to meet your requirements. To use font awesome icons in the menu component. Please refer to the code snippets and samples provided below.

Kindly add the below link to the _Layout.cshtml page.

    <link rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">

[Index.razor]

<SfMenu TValue="MenuItem">

    <MenuItems>

        <MenuItem Text="File" IconCss="fas fa-file">

            <MenuItems>

                <MenuItem Text="Open" IconCss="fas fa-folder-open"></MenuItem>

                <MenuItem Text="Save" IconCss="fas fa-save"></MenuItem>

                <MenuItem Separator="true"></MenuItem>

                <MenuItem Text="Exit" IconCss="fas fa-times"></MenuItem>

            </MenuItems>

        </MenuItem>

        <MenuItem Text="Help" IconCss="fas fa-question-circle"></MenuItem>

    </MenuItems>

</SfMenu>

However, to use the Syncfusion UG icons list, you can give any icon name, such as “e-icons e-file” into the M property of the Menu component. By including the e-icons name, all icon CSS will be loaded automatically. Please refer to the code snippets provided below.

<SfMenu TValue="MenuItem">

    <MenuItems>

        <MenuItem Text="File" IconCss="e-icons e-file">

            <MenuItems>

                <MenuItem Text="Open" IconCss="e-icons e-folder-open"></MenuItem>

                <MenuItem Text="Save" IconCss="e-icons e-save"></MenuItem>

                <MenuItem Separator="true"></MenuItem>

                <MenuItem Text="Exit"></MenuItem>

            </MenuItems>

        </MenuItem>

    </MenuItems>

</SfMenu>

To see the available icons in Syncfusion, please refer to the UG link below.

Link: https://blazor.syncfusion.com/documentation/appearance/icons#icons-list

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: MenuSample_f9256cd6.zip