I just did this yesterday:)

Firstly make sure nav is turned on in the config

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

   $('#_samewidth_images').owlCarousel({

      margin:10,

      autoWidth:false,

      nav:true,

      items:4,

      navText : ['<i class=fa fa-angle-left aria-hidden=true></i>','<i class=fa fa-angle-right aria-hidden=true></i>']

  })

This will inject the controls into the DOM, see

https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html

<div class=owl-carousel owl-theme owl-loaded>

    <div class=owl-stage-outer>

        <div class=owl-stage>

            <div class=owl-item>...</div>

            <div class=owl-item>...</div>

            <div class=owl-item>...</div>

        </div>

    </div>

    <div class=owl-controls>

        <div class=owl-nav>

            <div class=owl-prev>prev</div>

            <div class=owl-next>next</div>

        </div>

        <div class=owl-dots>

            <div class=owl-dot active><span></span></div>

            <div class=owl-dot><span></span></div>

            <div class=owl-dot><span></span></div>

        </div>

    </div>

</div>

Next use CSS to position the Next and Prev controls, this is what I used:

.owl-prev {

    width: 15px;

    height: 100px;

    position: absolute;

    top: 40%;

    margin-left: -20px;

    display: block !important;

    border:0px solid black;

}



.owl-next {

    width: 15px;

    height: 100px;

    position: absolute;

    top: 40%;

    right: -25px;

    display: block !important;

    border:0px solid black;

}

.owl-prev i, .owl-next i {transform : scale(1,6); color: #ccc;}

For my icons I used Font Awesome but you could use anything similar. Note the navText in the javascript code, this is where you put your custom HTML. I guess you could use an image too (or put it in the background of the .owl-next and .owl-prev divs. Note I used transform to make my arrows higher.