icon for accordion tabs on mobile view

i need to put different icon for each product tab titles on mobile view. this is woocommerce code and my icon is inside a tag, otherwise it will be shown on desktop view which is not accordion. i put

<i class="fas fa-list-ul"></i> 

inside a tag but clearly it repeats for each tab tile icon. so i need some dynamic code or loop to set different icon for each tab title. this is my code:

<?php foreach ( $product_tabs as $key => $product_tab ) : ?>
        <div class="woodmart-tab-wrapper">
            <a href="#tab-<?php echo esc_attr( $key ); ?>" class="woodmart-accordion-title tab-title-<?php echo esc_attr( $key ); ?> <?php echo $content_count === 0 ? 'active' : ''; ?>"><i class="fas fa-list-ul"></i>&nbsp;&nbsp;<?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $product_tab['title'] ), $key ); ?></a>
            <div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--<?php echo esc_attr( $key ); ?> panel entry-content wc-tab" id="tab-<?php echo esc_attr( $key ); ?>">
                <div class="wc-tab-inner 
                <?php
                if ( $scroll ) {
                    echo 'woodmart-scroll';}
                ?>
                ">
                    <div class="<?php echo true == $scroll ? 'woodmart-scroll-content' : ''; ?>">
                        <?php call_user_func( $product_tab['callback'], $key, $product_tab ); ?>
                    </div>
                </div>
            </div>
        </div>
        <?php $content_count++; ?>
    <?php endforeach; ?>