4

I have such a structure in HTML where I must put an icon, which is referred in an external URL, with an especific color. The color changes depending on the situation, and because of that, the icon shouldn't contain the color info.

To do that, I've been using a colored background and masking it with the external icon in SVG format, like this:

<style>
.icon-resource {
    display: inline-block;
    height: 24px;
    width: 24px;
    background-color: #35b6b6; /* example color */
    mask: url(https://image.flaticon.com/icons/svg/684/684809.svg)  no-repeat; 
    -webkit-mask: url(https://image.flaticon.com/icons/svg/684/684809.svg)  no-repeat; 
    -webkit-mask-size: cover; 
    mask-size: cover;     
}
</style>

<span class="icon-resource"></span>

JSfiddle here

Sadly, IE doesn't support masking, and all I get in such browser is a colored square.

So that's the deal: I'm looking for a way to get an icon from external URL (I'm currently trying with SVG, but I'm flexible to other image format) and apply a custom color to it, and it must work on IE10+, as well as in Chrome and Firefox.

I already tried:

<style>
.icon-new {
    display: inline-block;
    height: 24px;
    width: 24px;
}
</style>

<svg class="icon-new" viewBox="0 0 24 24">
    <use style="fill:#35b6b6" xlink:href="https://image.flaticon.com/icons/svg/684/684809.svg#Capa_1"></use>
</svg>

but it accuses me of

Unsafe attempt to load URL https://image.flaticon.com/icons/svg/684/684809.svg#Capa_1 from frame with URL XXX. Domains, protocols and ports must match.

Tried to solve it with the answers to "Unsafe attempt to load url svg", but nothing helped.

I guess I might most probably have to implement some JS to retrieve the SVG using AJAX request, but that would be damn troubling in my project...

Leo von Barbarosa
  • 727
  • 8
  • 22
  • 1
    I don't think that it can be done with this much backwards compatibility. Making the SVGs inline allows using `fill: currentColor` inside the SVG, which then allows controlling the color externally by setting `color`. [This blog post](https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images) is about the same topic, but it starts out by pointing out the progressive browser support needed. – mmlr Feb 01 '18 at 20:30
  • @mmlr the main problem is I need to get this SVG (or whatever image format) from a certain URL of another system I manage, for flexibility. Coloring is not exactly the problem, but the way of getting the image with the possibility of customizing the color. – Leo von Barbarosa Feb 01 '18 at 20:46
  • 1
    if you serve the image from your own system and it allows for server side scripting, you could easily make the desired color part of the URL, i.e. `background-image: url(".../icon.svg?fill=yellow")` and serve the needed variant dynamically. – mmlr Feb 01 '18 at 21:23
  • @mmlr thank you very much for this observation, I guess I'll take that approach you said. I'm not sure if I could say "easily make", as I'll have to handle the HTTP request and parse and edit the SVG's xml, but it sure seems a good solution. – Leo von Barbarosa Feb 02 '18 at 13:21

0 Answers0