V4 alpha 5 Implementation of custom input icons dont work in IE and FF

[philmayfield]

The alpha 4 implementation of the custom input (custom-select) icon looks like:

$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;

Of note the "%23333" which is the hex for # plus the color 333, so #333;

The alpha 5 implementation looks like this:

$custom-select-indicator-color: #333 !default; $custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;

Where a sass variable has been added to specify the color. This works great for flexibility and renders correctly for me on Chrome (v54), but does not work in IE (v11) and FF (v47).

I believe that its the combination of hex and plain text that goofs it up? Im not really sure... but what worked for me in all 3 browsers was to remove the # from the color, and add the "%23" to the svg code, like this:

$custom-select-indicator-color: 333 !default; $custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;

[mdo]

Duplicate of #20956 and since fixed with #20962.