New to Kendo UI for Angular? Start a free 30-day trial

Icons

The ExpansionPanel provides options for customizing its icon indicators by enabling you to display an SVG icon or a Font icon.

As of R2 2023 (v13.0.0) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed from font to svg. Set the svgIcon property, or Continue Using Font Icons.

Displaying SVG Icons

To display an SVG icon inside the ExpansionPanel set the svgExpandIcon and svgCollapseIcon properties of the ExpansionPanel to the necessary SVGIcon. For details, go to the list of SVG icons supported by Kendo UI for Angular.

html

<kendo-expansionpanel [svgExpandIcon]="arrowDown" [svgCollapseIcon]="arrowUp"></kendo-expansionpanel>

import { arrowDownIcon, arrowUpIcon, SVGIcon } from "@progress/kendo-svg-icons";
public arrowDown: SVGIcon = arrowDownIcon;
public arrowUp: SVGIcon = arrowUpIcon;

The following example demonstrates how to set the svgExpandIcon and svgCollapseIcon properties of the Expansion Panel.

Change Theme

Theme

Loading ...

Displaying Font Icons

To display a font icon inside the ExpansionPanel:

Use the ICON_SETTINGS token of the Icons package and set the icon type to font. For more information, go to the topic about icon settings.
You can replace both the Expand and Collapse icons with custom font icons by using the expandIcon and collapseIcon properties. This approach is suitable when you use the list of font icons supported by Kendo UI for Angular or when you consume third-party icon libraries like FontAwesome.
html
```
<kendo-expansionpanel ... expandIcon="k-icon k-font-icon k-i-plus" collapseIcon="fa fa-minus"></kendo-expansionpanel>
```

The following example demonstrates how to customize the icon indicators of the ExpansionPanel.