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.

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

Copy Codeimport { 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.

Displaying Font Icons

To display a font icon inside the ExpansionPanel:

1. 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.

2. 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.

   Copy Code<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.

Suggested Links

• API Reference of the ExpansionPanel