---
title: Use icon toggle buttons
layout: page
js: examples/icon_buttons.js
css: example.css
---

<p id="nav">
    <a href="../09_custom_html/">&laquo; Example 9</a>
    <a href="../11_right-to-left/" class="next">Example 11 &raquo;</a>
</p>

<h1>Example 10 - use icon toggle buttons</h1>

<p>
    You can use the <strong>openedIcon</strong> and <strong>closedIcon</strong> options to use html for
    the toggle buttons. You can for example use <a href="https://github.com/FortAwesome/Font-Awesome">Fontawesome icons</a>.
</p>
<div id="tree1" data-url="/example_data/"></div>

<h3>javascript</h3>

{% highlight js %}
$('#tree1').tree({
    closedIcon: $('<i class="fas fa-arrow-circle-right"></i>'),
    openedIcon: $('<i class="fas fa-arrow-circle-down"></i>')
});
{% endhighlight %}
