Base solution for your next web application
Open Closed

Customize Icon in The Menu #9135


User avatar
0
klken88 created

.AddItem(new MenuItemDefinition( AppPageNames.Common.TariffFinderMalaysia, L("TariffCode"), url: "App/TariffCode", icon: "images/myicon.ico", permissionDependency: new SimplePermissionDependency(AppPermissions.Pages_TariffFinderMalaysia) )

Please guide how can I change to my customize icon like pointing directly to the icon file?

thanks In Advanced


4 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team
    • What is your product version?
    • What is your product type (Angular or MVC)?
    • What is product framework type (.net framework or .net core)?

    For Angular: Currently zero uses flaticon. If you want to change to other icons or custom icons, you can specify the icon in the AppNavigationService and display it in the SideBarMenuComponent as appropriate. For example, you can specify the icon as image url, and then modify the template of the component.

  • User Avatar
    0
    klken88 created

    ASP.Net Core MVC + JQuery version 8.8

    Can You please point out the steps to get it done. thanks in advanced.

  • User Avatar
    1
    maliming created
    Support Team

    hi

    For mvc:

    You can change this component.

    MyCompanyName.AbpZeroTemplate.Web.Mvc\Areas\AppAreaName\Views\Shared\Components\AppAreaNameMenu\_UserMenuItem.cshtml

    https://github.com/aspnetzero/aspnet-zero-core/blob/dev/aspnet-core/src/MyCompanyName.AbpZeroTemplate.Web.Mvc/Areas/AppAreaName/Views/Shared/Components/AppAreaNameMenu/_UserMenuItem.cshtml#L26

  • User Avatar
    0
    klken88 created

    Managed to work it out. Share here for anyone that might find it useful:

    (1) In AppNavigationProvider class

    .AddItem(new MenuItemDefinition( AppPageNames.Tenant.TariffFinderMalaysia, L("TariffFinderMalaysia"), url: "App/ABC", icon: "YourIconFileName" )

    (2) In UserMenuItemViewModel class

    add
    public string GetIconUrl(string appPath, string IconFile)
        {
            return appPath + $"Common/Images/{IconFile}.ico";
        }
        
    

    (3) In _UserMenuItem.cshtml

    replace <i class="kt-menu__link-icon @Model.MenuItem.Icon"></i> with

         ```
    
    ```