Is there any workaround to invert the color of svg icons in IE?

I am passing the following URL to an imageUrl property:

'{!URLFOR($Asset.slds, "assets/icons/utility/expand.svg")}'

due to already having these svg icons. I then invert them because they come through as white when they are not used in svg tags:

.k-tabstrip-items .k-item .k-image {
        width: 30px;
        margin-left: 1%;
        margin-top: -10px;
        -webkit-filter: invert(100%);
        -moz-filter: invert(100%);
        -ms-filter: invert(100%);
        -o-filter: invert(100%);
    }

    .k-tabstrip-items .k-item .k-state-active .k-image {
        -webkit-filter: invert(0%);
        -moz-filter: invert(0%);
        -ms-filter: invert(0%);
        -o-filter: invert(0%);
    }

However, this of course does not work in IE, neither does image masking... Is there some workaround to make these icons black in IE? I am struggling to find a workable solution (if there really is one). It could be that it will just require having black colored icons... But wanted to check if there was something I could do with CSS to get this work.