Rank 1
i know if using Span i can colour an icon like this:
<span className={`fas fa-question-circle`} style={{ color:'red' }}/>
How do I change the icon colour for each PanelBarItem? This does not work:
<PanelBarItem
title={myTitle}
key={myKey}
iconClass={`fas fa-question-circle`} style={{ color:myColour }}
>
Item contents
</PanelBarItem>
1 Answer, 1 is accepted
Hello, Sandie,
The style prop works for applying styles to the PanelBar component, but if we want to change the color of a PanelBarItem there are multiple ways we can approach this, depending on our use case. One way to accomplish this is to use the iconClass property similarly to your approach, but adding a separate class that styles the icon, since passing the style prop to an item will not work:
iconClass={'fa fa-question-circle red'}and then set the desired color In our CSS:
.red {
color: red;
}I made a runnable example that illustrates this approach here:
https://stackblitz.com/edit/react-nkpp6u?file=app/main.jsx
Regards, Philip Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
would still like the answer on how to do it the bast way.
for now though i have stopped trying to use iconClass={`fas fa-question-circle`}
for now I have put a <span> into the title, seems to work OK
title={
<Fragment> <span className={`fas fa-question-circle`} style={{ color:'red' }}/>
{myTitle}
</Fragment>
}