How to add custom button in toolbar

@{
    string[] items = new string[] { "NewFolder", "Upload", "Delete", "Download", "Rename", "SortBy", "Refresh", "Selection", "View", "Details" , "Custom"};
}
<div class=" control-section">
    <div class="sample-container">
        <!--  Filemanager element declaration -->
        <ejs-filemanager id="file" toolbarClick="toolbarClick" toolbarCreate="onCreate">
            <e-filemanager-ajaxsettings url="/Home/FileOperations"
                                        downloadUrl="/Home/Download"
                                        uploadUrl="/Home/Upload"
                                        getImageUrl="/Home/GetImage">
            </e-filemanager-ajaxsettings>
            <e-filemanager-toolbarsettings items="items">
            </e-filemanager-toolbarsettings>
        </ejs-filemanager>
        <!-- end of filemanager element -->
    </div>
</div>
<script>
    // event for custom toolbar item
    function toolbarClick(args) {
        if (args.item.text === 'Custom') {
            alert('You have clicked custom toolbar item')
        }
    }
    function onCreate(args) {
        for (var i = 0; i < args.items.length; i++) {
            if (args.items[i].id === this.element.id + '_tb_custom') {
                args.items[i].prefixIcon = 'e-icons e-fe-tick';
            }
        }
    }

</script>
<style>
    .e-fe-tick::before {
        content: '\e614';
    }
</style>