Version:

Install ​

shell
npm i @vaadin/accordion@${version.vaadin.web}
npm i @mate/component-addons@${version.mate.web}

Import ​

javascript
import '@vaadin/button';
import '@component-addons/button';

Variants ​

Panels with summary and icons ​

html
<vaadin-accordion>
    <vaadin-accordion-panel>
        <mate-details-summary slot="summary" title-text="First panel">
            <span theme="badge">Information</span>
            <span theme="badge">Information</span>
            <vaadin-button theme="icon" slot="action">
                <span theme="icon">delete</span>
            </vaadin-button>
            <vaadin-button theme="icon" slot="action">
                <span theme="icon">content_copy</span>
            </vaadin-button>
        </mate-details-summary>
        <span>Content</span>
    </vaadin-accordion-panel>
    <vaadin-accordion-panel disabled>
        <mate-details-summary slot="summary" title-text="Disabled panel">
            <span theme="badge">Information</span>
            <span theme="badge">Information</span>
            <vaadin-button theme="icon" slot="action">
                <span theme="icon">delete</span>
            </vaadin-button>
            <vaadin-button theme="icon" slot="action">
                <span theme="icon">content_copy</span>
            </vaadin-button>
        </mate-details-summary>
        <span>Content</span>
    </vaadin-accordion-panel>
</vaadin-accordion>