Can I replace the icon in the uk-offcanvas-close, uk-close to chevron-right?

Question

getuikit Version 3.1.5, without jquery dependency

I would like to change the "x" icon for some uk-offcanvas-close to ">" instead:
if ".closedetail> button", then icon is "chevron-right" (>) instead of "close" (X)

<div class="closedetail">
    <button class="uk-offcanvas-close" type="button" uk-close></button>
</div>

Answer 1

It may not be the best answer, but you can use uk-toggle instead of uk-offcanvas-close. The toggle is used the same way as in button that opens the offcanvas - and because it's a toggle, it closes the offcanvas when it's open already. By replacing this, you're then able to set whatever icon you want

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit-icons.min.js"></script>

<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-usage">Open</button>

<div id="offcanvas-usage" uk-offcanvas>
    <div class="uk-offcanvas-bar">

        <!-- Instead of using uk-offcanvas-close, we can use uk-toggle -->
        <button type="button" class="uk-align-right" uk-toggle="target: #offcanvas-usage" uk-icon="chevron-right"></button>

        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>