SVG Icon With CSS

by _sir

HTML

<span class="icon icon-flag" data-color="red"></span> Some Text

CSS

body {
  color: green;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.icon-flag {
   content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><path class="svg-path" d="M483.932,47.29c-26.72,21.71-55.73,42.46-89.55,51.16c-20.05,5.17-41.561,4.15-61.05-2.83   c-32.49-11.5-59.341-34.58-91.771-46.22c-19.03-7.16-39.91-9.12-59.95-5.83c-29.68,4.86-56.739,19.26-81.62,35.58   c-0.1,86.75-0.039,173.51-0.029,260.27c25.46-16.641,53.189-31.38,83.63-35.891c21.93-3.389,44.66,0.061,64.97,8.871   c27.48,11.369,51.18,30.14,78.811,41.209c19.33,7.971,41,10.641,61.529,6.311c36.04-7.58,66.9-29.439,94.97-52.29   C484.092,220.859,483.972,134.07,483.932,47.29z"/><path d="M73.5,426.784V73.216c9.064-6.325,15-16.824,15-28.716c0-19.33-15.67-35-35-35s-35,15.67-35,35   c0,11.892,5.936,22.391,15,28.716v353.568c-9.064,6.325-15,16.824-15,28.716c0,19.33,15.67,35,35,35s35-15.67,35-35   C88.5,443.608,82.565,433.109,73.5,426.784z"/></g></svg>');
   background-size: contain, contain;
}


.svg-path {
  fill: green !important;
}