currently, we are using font-awsome for all our icons. This is very limiting and leads to usability issues. A much better approach would be to allow the choice to the theme author for whatever they want to use be it a font, png, or SVG. We would want to do this without having to change the way its coded for simplicity and BC.

currently, to add an icon we do so like this

<i class="icon fa-bold" aria-hidden="true"></i><span class="sr-only">Label</span>

Ideally, we need the icon class name, label, and wheater it is decoration only. The only thing that would change would be if you want to use font, png, or svg which would be handled by changing the "fa-" to "font-", "png-", or "svg-"

in the theme folder, we would have an icon folder with two subfolders one called "png" and one called "svg" the icons would need to be named the same as the class. The way it would work is as follows.

depending on the preceding word of the icon name you would render the appropriate code for that type of icon.

Font icon: would not change and would look like this

<i class="icon font-bold" aria-hidden="true"></i><span class="sr-only">Label</span>

PNG icon would be changed to:

<img class="icon png-bold" src="theme path/img/icon/png/bold.png" alt="Label">

SVG icon would be where the real big difference is as it would import the entire svg code inject the class and the title

<svg class="icon svg-bold" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

    <title>Label</title>

    <path fill-rule="evenodd" d="M16.59 8L12 12.58 7.41 8 6 9.41l6 6 6-6z" />

</svg>

it should also go without mentioning that all classes get passed along as well as any data attributes.

<img class="icon png-subscribe" src="theme path/img/icon/png/subscribe.png" alt="Label" data-swap"unsubscribe">

where this breaks down and we need to work out is how to swap icons via js if SVG/font/png? this would require ajax calls and recreate the icon via js for SVG...