When using the Font Awesome Pro multi-tone icons the accordian control does not show the icons correctly.
<ul class="fa-ul">
<li><i class="fad fa-id-badge"></i> Brand with image only</li>
<li><i class="fad fa-closed-captioning"></i> Brand with text only</li>
<li><i class="fad fa-id-card"></i> Brand with image and text</li>
<li><i class="fad fa-arrow-to-left"></i> Links container left</li>
<li><i class="fad fa-arrow-to-right"></i> Links container right</li>
<li><i class="fad fa-line-columns"></i> Mega menu</li>
<li><i class="fal fa-text"></i> Text</li>
<li><i class="fad fa-search"></i> Search</li>
</ul>
<div class="container">
<div class="row">
<div class="col">
<div class="control-section">
<div class="control_wrapper accordion-control-section">
<SfAccordion>
<AccordionItems>
<AccordionItem Expanded=true>
<HeaderTemplate>
<i class="e-acrdn-header-icon fas fa-arrow-to-top"></i><span class="e-acrdn-header-content">Top Level</span>
</HeaderTemplate>
<ContentTemplate>
<ul class="fa-ul">
<li><i class="fas fa-id-badge"></i> Brand with image only</li>
<li><i class="fas fa-closed-captioning"></i> Brand with text only</li>
<li><i class="fas fa-id-card"></i> Brand with image and text</li>
<li><i class="fad fa-arrow-to-left"></i> Links container left</li>
<li><i class="fad fa-arrow-to-right"></i> Links container right</li>
<li><i class="fad line-columns"></i> Mega menu</li>
<li><i class="fal fa-text"></i> Text</li>
<li><i class="fad fa-search"></i> Search</li>
</ul>
</ContentTemplate>
</AccordionItem>
<AccordionItem Header="Menu Items" IconCss="e-water-game e-acrdn-icons">
<ContentTemplate>
<ul>
<li><span class="e-acrdn-icons e-content-icon dive"></span> Diving</li>
<li><span class="e-acrdn-icons e-content-icon swimming"></span> Swimming</li>
<li><span class="e-acrdn-icons e-content-icon marathan_swim"></span> Marathon Swimming</li>
<li><span class="e-acrdn-icons e-content-icon sync_swim"></span> Synchronized Swimming</li>
<li><span class="e-acrdn-icons e-content-icon waterpolo"></span> Water Polo</li>
</ul>
</ContentTemplate>
</AccordionItem>
</AccordionItems>
</SfAccordion>
</div>
</div>
</div>
</div>
</div>
