How to create custom toolbar for ejPdfViewer with themes support?

<div id="ToolbarItem">
        <ul>
            <li id="Previous" title="Go to the previous page of the PDF document">
                <div class="PdfDocument e-icon e-pdfviewer-icon e-pdfviewer-gotoprevious "></div>
            </li>
            <li id="Next" title="Go to the next page of the PDF document">
                <div class="PdfDocument e-pdfviewer-icon e-pdfviewer-gotonext "></div>
            </li>
        </ul>
        <ul>
            <li id="ZoomIn" title="Zoom in to the PDF document">
                <div class="PdfDocument e-pdfviewer-icon e-pdfviewer-zoomin "></div>
            </li>
            <li id="ZoomOut" title="Zoom out of the PDF document">
                <div class="PdfDocument e-pdfviewer-icon e-pdfviewer-zoomout "></div>
            </li>
        </ul>
    </div>
<script type="text/javascript">
$(function () {
            // initializing ejToolbar
            $("#ToolbarItem").ejToolbar({
                height: "auto",
                enableSeparator: true,
                click: "onItemclick"
            });
        });
        function ondocumentload(args) {
            var _ejPdfViewer = $("#container").data("ejPdfViewer");
            //hiding the default toolbar
            _ejPdfViewer.showToolbar(false);
        }
        function onItemclick(args) {
            // adding functionalities to the icons
            var option = args.currentTarget.id;
            var _ejPdfViewer = $("#container").data("ejPdfViewer");
            switch (option) {
                case "ZoomIn":
                    _ejPdfViewer.zoomIn();
                    break;
                case "ZoomOut":
                    _ejPdfViewer.zoomOut();
                    break;
                case "Previous":
                    _ejPdfViewer.goToPreviousPage();
                    break;
                case "Next":
                    _ejPdfViewer.goToNextPage();
                    break; 
            }
    </script>