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:
- Set the icon type to
svg
by using theICON_SETTINGS
token. For more information, go to the topic abouticon settings
. - Set the
svgExpandIcon
andsvgCollapseIcon
properties to the necessarySVGIcon
. 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.
```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.