Icons

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

Displaying SVG Icons

To display an SVG icon inside the ExpansionPanel:

1. Set the icon type to svg by using the ICON_SETTINGS token. For more information, go to the topic about icon settings.
2. Set the svgExpandIcon and svgCollapseIcon properties to the necessary SVGIcon. For more details, go to the list of SVG icons supported by Kendo UI for Angular.

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

Displaying Font Icons

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```html
<kendo-expansionpanel ... expandIcon="k-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