Fix invalid <i> HTML in AMP templates

Author: bc-annavu

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Draft
 - Update bigcommerce.com footer link [#990](https://github.com/bigcommerce/cornerstone/pull/990)
+- Use <span> instead of <i> for icons in AMP template [#989](https://github.com/bigcommerce/cornerstone/pull/989)
 
 ## 1.6.3 (2017-03-28)
 - `stencil.conf.js` was refactored to support webpack2 builds [961](https://github.com/bigcommerce/cornerstone/pull/961)

templates/components/amp/common/navigation-menu.html

@@ -20,7 +20,7 @@
         {{#if currency_selector.currencies.length '>' 1}}
             <li class="navPages-item">
                 <a class="navPages-action has-subMenu" href="#" data-collapsible="navPages-currency" aria-controls="navPages-currency" aria-expanded="false">
-                    {{lang 'common.currency' code=currency_selector.active_currency_code}} <i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use></svg></i>
+                    {{lang 'common.currency' code=currency_selector.active_currency_code}} <span class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use></svg></span>
                 </a>
                 <div class="navPage-subMenu" id="navPages-currency" aria-hidden="true" tabindex="-1">
                     <ul class="navPage-subMenu-list">
@@ -57,7 +57,7 @@
         {{#if customer}}
             <li class="navPages-item">
                 <a class="navPages-action has-subMenu" href="{{urls.account.index}}" data-collapsible="navPages-account">
-                    {{lang 'common.account'}} <i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i>
+                    {{lang 'common.account'}} <span class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></span>
                 </a>
                 <div class="navPage-subMenu" id="navPages-account" aria-hidden="true" tabindex="-1">
                     <ul class="navPage-subMenu-list">

templates/components/amp/common/paginator.html

@@ -3,7 +3,7 @@
         {{#if previous}}
             <li class="pagination-item pagination-item--previous">
                 <a class="pagination-link" href="{{previous}}" {{#unless reload}}data-faceted-search-facet{{/unless}}>
-                    <i class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></i>
+                    <span class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></span>
                     {{lang 'common.previous'}}
                 </a>
             </li>
@@ -24,7 +24,7 @@
             <li class="pagination-item pagination-item--next">
                 <a class="pagination-link" href="{{next}}" {{#unless reload}}data-faceted-search-facet{{/unless}}>
                     {{lang 'common.next'}}
-                    <i class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></i>
+                    <span class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></span>
                 </a>
             </li>
         {{/if}}