Search code examples
c#iconscustomizationfont-awesomeaspnetboilerplate

How to use icons with NavigationProvider that are not Material Design?

I would like to use icons with the NavigationProvider that are not available in the material design offerings.

Inside the SetNavigation method, we build up the Main Menu.

There is an option to set the icon property by using the Material Design icon name — for example, the menu item below uses the "people" string to display the png:

enter image description here

.AddItem(
    new MenuItemDefinition(
        PageNames.Doctors,
        L("Doctors"),
        url: "Doctors",
        icon: "people",
        requiredPermissionName: PermissionNames.Pages_Doctors
    )
)

Can other icons be used besides the material design ones? If so, how do I reference the image or icon?

Thanks

Solution

  • ASP.NET Core + Angular

    Modify the following in sidebar-nav.component.ts:

    // new MenuItem(this.l("HomePage"), "", "home", "/app/home"),
new MenuItem(this.l("HomePage"), "", "fa fa-home", "/app/home"),

    Modify the following in sidebar-nav.component.html:

    <!-- <i *ngIf="menuItem.icon" class="material-icons">{{menuItem.icon}}</I> -->
<i *ngIf="menuItem.icon && menuItem.icon.startsWith('fa ')" class="{{menuItem.icon}}"></i>
<i *ngIf="menuItem.icon && !menuItem.icon.startsWith('fa ')" class="material-icons">{{menuItem.icon}}</I>

    You may want to add some Styling (see below) in sidebar-nav.component.html.

    ASP.NET Core + jQuery

    Modify the following in *NavigationProvider.cs:

    new MenuItemDefinition(
    PageNames.Home,
    L("HomePage"),
    url: "",
 // icon: "home",
    icon: "fa fa-home",
    requiresAuthentication: true
)

    Modify the following in SideBarNav/Default.cshtml:

    @if (!string.IsNullOrWhiteSpace(menuItem.Icon))
{
    <!-- <i class="material-icons">@menuItem.Icon</i> -->
    @if (menuItem.Icon.StartsWith("fa "))
    {
        <i class="@menuItem.Icon"></i>
    }
    else
    {
        <i class="material-icons">@menuItem.Icon</i>
    }
}

    You may want to add some Styling (see below) in SideBarNav/Default.cshtml.

    Styling

    <style>
    .sidebar .fa {
        font-size: 24px;
        height: 30px;
        margin-top: 4px;
        text-align: center;
        width: 24px;
    }
</style>