SVG Icon Path Class in CSS - css

Question

I'm embedding the following SVG icon as a path in my HTML page:
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>
How can I include the above SVG icon path as a class in CSS? So I can just use it as an attribute in my HTML page like this:
<i class="chevron-right"></i>
Update: With respect to the accepted answer, I had some problems getting the icon to vertically center properly and ended up finding a much simpler CSS code:
.chevron-right {
vertical-align: middle;
content: url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

Answer 1

Use it as background:
.chevron-right {
display: inline-block;
width: 1rem;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>') 0 0/contain no-repeat;
}
.chevron-right::before {
content: "";
display: block;
padding-top: 100%;
}
<i class="chevron-right"></i>
<i class="chevron-right" style="width:2rem"></i>
<i class="chevron-right" style="width:4rem"></i>
In case you want coloration consider mask:
.chevron-right {
display: inline-block;
width: 1rem;
-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>') 0 0/contain;
background: currentColor;
}
.chevron-right::before {
content: "";
display: block;
padding-top: 100%;
}
<i class="chevron-right"></i>
<i class="chevron-right" style="width:2rem;color:red;"></i>
<i class="chevron-right" style="width:4rem;color:blue;"></i>

Answer 2

Create a Custom Element: <svg-icon path="your d path"></svg-icon>
<style>
svg-icon svg {
width: 80px;
height:80px;
background: grey;
}
</style>
<svg-icon path="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></svg-icon>
<script>
customElements.define("svg-icon", class extends HTMLElement {
connectedCallback() {
this.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="${this.getAttribute("path")}"/></svg>`;
}
});
</script>
If you need icons, see my pet-project IconMeister.github.io