Icons in dynamic navigation

I have a navigation that loads the "pageNavText". For context, it's a menu showing-sub pages of a section. I would like the user to be able to add icons to each navigation item, but because they are loaded dynamically via Perch I'm not too sure how to give the user this option. Below is what I'm currently using for this navigation page:

<div class="col-lg-3">
<perch:before>
    </perch:before>
    <a class="text-center semi-bold" href="<perch:pages id="pagePath" />"> <!-- wrapping the panel in an a tag -->
        <div class="panel panel-default" <perch:if exists="current_page"></perch:if><perch:if exists="ancestor_page"> class="ancestor"</perch:if>>
          <div class="panel-body">
            <perch:pages id="pageNavText" /><!-- setting the nav text. -->
          </div>
        </div>
        <perch:pages id="subitems" encode="false" />
    </a>
    <perch:after>
 </perch:after>
</div>