Plotly JS : How to use custom HTML Buttons instead of Modebar Tools?

I have a sidemenu on a webpage with icons for buttons.
I wish to use these custom buttons instead of the tools on the modebar.
How can I code this in Vanilla JavaScript?
How can I call the functions (used by the icons on the modebar) via the icons on my sidemenu?

Here is the HTML code.

<div class="sidemenu">
        <ul class = "sidemenu-tools">
            <li><button><img src="icons/zoom.svg" class="tool" id="zoom_button"></button></li>
            <li><button><img src="icons/zoom-out.svg" class="tool2" id="zoom_out_button"></button></li>
            <li><button><img src="icons/undo.svg" class="tool" id="undo_button"></button></li>
            <li><button><img src="icons/redo.svg" class="tool" id="redo_button"></button></li>
            <li><button><img src="icons/reset.svg" class="tool2" id="reset_button"></button></li>
            <li><button><img src="icons/save.svg" class="tool3" id="save_button"></button></li>
        <ul class="sidemenu-others">
            <li><button><img src="icons/watchlist_toggle.svg" class="tool" id="watchlist_toggle"></button></li>
            <li><button><img src="icons/user.svg" class="tool"></button></li>

Here is one of my event listeners on JavaScript for reference.

const zoomButton = document.getElementById('zoom_button');

const zoomButtonHandler = function(event) {
    console.log("Zoom Button Pressed");

zoomButton.addEventListener('click', zoomButtonHandler);

Hey @YunYun welcome to the forums. Does this help?