How can I change the size of an ExpensionPanel's expand and collapse button?

[Tomy]

I'm trying to add a simple expansion panel to my page. I need to use extra-large chevron-up down expand and collapse icons. I've tried creating an SvgIcon react element and setting its size that way, but I get a typescript error saying the element is missing the name. Is there a simple way to change the expand and collapse svg icon sizes on an ExpansionPanel? This is something I've tried so far:

 

const expandIcon = (
	<SvgIcon className="k-mb-xs k-mx-sm" icon={chevronUpIcon} size="xxlarge" />
);

return (
	<ExpansionPanel
		title={title}
		expanded={expanded}
		expandSVGIcon={expandIcon}
		onAction={(event) => {
			setExpanded(!event.expanded);
		}}
	>
		<span />
		<Reveal>
			{expanded && <ExpansionPanelContent>{children}</ExpansionPanelContent>}
		</Reveal>
	</ExpansionPanel>
);

[Hetali]

Hello Tomy,

In order to change the size of the expand and collapse icons in the KendoReact ExpansionPanel, use the following CSS that is the value of xxlarge size:

.k-expander .k-svg-icon {
  font-size: 32px; 
  width: 32px; 
  height: 32px
}

Output:

In this StackBlitz example, I have increased the size of the icons in the ExpansionPanel.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik