Customizing the arrow direction the panelbar

2 posts, 0 answers
  1. Phil
    Phil avatar
    1 posts
    Member since:
    Feb 2018

    Posted 23 Feb 2018 Link to this post

    Out of the box the arrow defaults to up for opened and down for closed. Out art director wanted to know if we could change the arrow to be pointing left for closed and up for open.

    Hope this question makes sense.



  2. Neli
    Neli avatar
    221 posts

    Posted 27 Feb 2018 Link to this post

    Hi Phil,

    You can override the default icons by applying custom style. In order to override the 'down' arrow and replace it with 'left' arrow, you can use the style below:
         .k-i-arrow-60-down:before {
           content: "\e007" !important;

    Note, that the above will replace all arrows on the page. In case you need to replace only the arrows in specific PanelBar, you can add its id to the selector. For example: #panelbar .k-i-arrow-60-down:before

    I hope that the linked Dojo example will be helpful.

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top