Change toggle icon

Radzen.Blazor Components
1

I have created two entries in the style.css file, one to change the plus toggle and one to change the minus toggle on a panel. I am only able to add one parameter called class, so I can only affect one of the two toggles. Is there another way around this?

2

You can use CSS's cascading abilities to style the toggle via the defined Class="your-class-here":

.rz-panel.your-class-here .rz-panel-titlebar-toggler .rzi-minus:before {
    content: 'remove';
}

.rz-panel.your-class-here .rz-panel-titlebar-toggler .rzi-plus:before {
    content: 'add';
}

Or you can directly overwrite the toggle icons using !important:

.rz-panel-titlebar-toggler .rzi-minus:before {
    content: 'remove' !important;
}

.rz-panel-titlebar-toggler .rzi-plus:before {
    content: 'add' !important;
}
3

Yes I did that.

.my-panel-open .rz-panel-titlebar-toggler .rzi-minus:before {
content: 'expand_more';
}
.my-panel-closed .rz-panel-titlebar-toggler .rzi-plus:before {
content: 'chevron_right';
}

But when I add them to the panel as an attribute, I can only use the name "class" once. If I used a different name ...ie. class2, then neither classes are recognized.

Unless I am using the name wrong...

4

You don't need to set two different classes. One custom class can target both the expand and collapse icon as shown by @yordanov. Just try his example.

5

Got it! Thank you very much!