Multi-Color Icons or SVG in Tabbar?


#1

Hi,

Our design calls for multi-color icons for use with ion-tabs. Using icomoon, I figured out how to create a custom icon font based off of our SVG files. But, icon fonts only seem to support a single color.

So…I’m stuck with seeing if I can figure out how to inject SVG instead.

I’ve been trying to use this library:

My code looks something like this (abbreviated):

index.html

    <head>
     ....
     <script src="/js/svg-injector.min.js"></script>
     <script>
        // Elements to inject
        var mySVGsToInject = document.querySelectorAll('.icon-list-color');

        // Do the injection
        SVGInjector(mySVGsToInject);
    </script>
    ....
    <ion-nav-view></ion-nav-view>
    <img src="/img/icons/list-icon.svg" class="icon-list-color" style="display:none;" />
   </body>

tabs.html

<ion-tab title="my lists" icon-off="icon-list-color" icon-on="icon-list-color" href="#/tab/mylists">
    <ion-nav-view name="tab-preferences"></ion-nav-view>
</ion-tab>

However no icon is showing up in my tab with this method.

So, wondering if anyone has another method or any kind of success using SVG or some other approach (not PNGs) with multi-color icons?

Thanks!

-Ian