Rzi rz-navigation-item-icon-children icon change

Angelos_Makis · November 17, 2022, 1:52pm

Is there any way I can change the keyboard_arrow_down icon in the sidebar to arrow_forward and arrow_backward in my css and not in the base css? Thank you.

enchev · November 17, 2022, 2:39pm

Not very convenient at the moment since the icon is hardcoded:

github.com

radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenPanelMenuItem.razor

@inject NavigationManager UriHelper
@inherits RadzenComponent
@if (Visible)
{
    <li style="@Style" @attributes="Attributes" class="@GetCssClass()" @onclick="@OnClick" @onclick:stopPropagation>
        <div class=@(Selected ? "rz-navigation-item-wrapper rz-navigation-item-wrapper-active" : "rz-navigation-item-wrapper")>
            @if (!string.IsNullOrEmpty(Path))
            {
                <Microsoft.AspNetCore.Components.Routing.NavLink target="@Target" class=@(Selected ? "rz-navigation-item-link rz-navigation-item-link-active" : "rz-navigation-item-link") href="@Path">
                    @if (!string.IsNullOrEmpty(Icon))
                    {
                        <i class="rzi rz-navigation-item-icon">@((MarkupString)Icon)</i>
                    }
                    @if (!string.IsNullOrEmpty(Image))
                    {
                        <img class="rz-navigation-item-icon" src="@Image" />
                    }
                    @if(Template != null)
                    {
                        @Template

This file has been truncated. show original

We will change it similar to accordion and you will be able to just set a CSS variables for expand/collapse icons:

github.com

radzenhq/radzen-blazor/blob/032d6a1ae17f9e1a642b7c2a6c5da14cadf7b521/Radzen.Blazor/themes/components/blazor/_accordion.scss#L86


      
                flex-grow: 1;
              }
            }
          
          
  .rzi {
              font-size: var(--rz-accordion-icon-font-size);
              margin: var(--rz-accordion-icon-margin);
            }
          }
          
          
.rz-accordion-toggle-icon {
            width: var(--rz-accordion-icon-width);
            height: var(--rz-accordion-icon-height);
            font-size: var(--rz-accordion-icon-font-size);
            order: var(--rz-accordion-toggle-icon-order);
          
          
  &.rzi {
              margin: var(--rz-accordion-toggle-icon-margin);
            }
          
          
  &.rzi-chevron-right {

Angelos_Makis · November 18, 2022, 7:59am

Thank you for your quick response!