Introduction
Getting Started
Vue 2 End of Support
Native Components
- Animation
- Buttons
- Chartsupdated
- Conversational UInew
- Data Query
- Data Tools
- Date Inputs
- Date Math
- Dialogs
- Drawing
- Dropdownsupdated
- Editor
- Excel Export
- File Saver
- Form
- Gauges
- Grid
- Icons
- Indicators
- Inputs
- Labels
- Layoutupdated
- - Overview
  - Getting Started
  - ActionSheetnew
  - AppBar
  - Avatar
  - BottomNavigation
  - Card
  - ContextMenu
  - Drawer
  - ExpansionPanelnew
  - - Overview
    - Animations
    - Custom Icons
    - Disabled ExpansionPanel
    - Keyboard Navigation
    - Events
    - Accessibility
  - GridLayoutnew
  - Menu
  - PanelBar
  - Splitter
  - StackLayoutnew
  - Stepper
  - TabStrip
  - TileLayoutupdated
  - Wizard
  - Globalization
  - API
- ListBox
- ListView
- Notification
- PDF Processing
- Popup
- Progress Bars
- Scheduler
- ScrollView
- Tooltip
- TreeList
- TreeView
- Upload
Wrapper Components
Sample Applications
Styling & Themes
Common Features
Project Setup
Knowledge Base
Changelog
FAQ
Troubleshooting

Components / Layout / ExpansionPanel / Custom Icons /

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

Custom Icons

The ExpansionPanel provides the option to customize the icon that indicates the expanded/collapsed state of the component.

You can replace both the expand and collapse icons with icons by your choice by using the expandIcon and collapseIcon properties.

The following example demonstrates how both the Kendo UI for Vue Icons and Font Awesome Icons can be used as expand/collapse icons.

Example

View Source

Change Theme:

Suggested Links

API Reference of the ExpansionPanelProps

Disabled ExpansionPanel

Is this article helpful?

Thank you for your feedback!