Using an SVG icon in a pseudo element, with control over size and color?

Question

I am hoping to achieve something like this:

Link >

Where the > is an SVG icon.

I am using icomoon.io's "chevron-right" icon and loading icons by inlining the icon sprite file (included, with only this icon).

I reference other icons inline and that works OK.

<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-menu"></use></svg>

.icon {
  display: inline-block;
  stroke-width: 0;
  stroke: black;
  fill: currentColor;
  width: 1.1em;
  height: 1.1em;
}

I am looking for a way to reference the icon in a pseudo element so I can easily style all links with it.

So far the only way I've found is to inline it, but I can't seem to control the size or color -- whether I use it as a background image or as content.

.-with-trailing-chevron:after  {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath fill='##4A89AA' d='M15.7 11.3l-6-6c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l6-6c0.4-0.4 0.4-1 0-1.4z'%3E%3C/path%3E%3C/svg%3E");
  background-image-size: cover; // these don't seem to work
  display: inline-block;
  width: .8em; // these don't seem to work on the icon
  height: .8em; // these don't seem to work on the icon
}

Also, would much prefer to reference it instead of inlining.

Are these possible?

Icons sprite file, which I currently inline to avoid ie incompatibilities:

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-chevron-right" viewBox="0 0 24 24">
<title>chevron-right</title>
<path d="M15.7 11.3l-6-6c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l6-6c0.4-0.4 0.4-1 0-1.4z"></path>
</symbol>
</defs>
</svg>

Answer 1

Data urls are treated as inert images that do not allow external (to the data url!) references. You need to set their properties inside the svg code. So if you want to change size and color, only this will work:

a::after {
    content: url('data:image/svg+xml,<svg width="1em" height="1em" fill="green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.7 11.3l-6-6c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l6-6c0.4-0.4 0.4-1 0-1.4z"></path></svg>');
    vertical-align: -0.2em;
    padding-left: 0.1em;
}
a:hover::after {
    content: url('data:image/svg+xml,<svg width="1.2em" height="1.2em" fill="red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.7 11.3l-6-6c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l6-6c0.4-0.4 0.4-1 0-1.4z"></path></svg>');
    vertical-align: -0.3em;
    padding-left: 0;
}

<a href="">Link</a>

As you can see, positioning can still be modified by CSS.