Material icons

Shows coloring of SVG icons and rotating of separate elements.

by KirillMetrik

HTML

<div
  class="medvedko"
>
  <svg version="1.1" id="Vrstva_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<path fill="var(--color-1)" d="M32,6.833c-13.892,0-25.152,11.235-25.152,25.095c0,13.859,11.261,25.095,25.152,25.095
	c13.891,0,25.15-11.236,25.15-25.095C57.15,18.068,45.891,6.833,32,6.833z"/>
<path fill="var(--color-2)"  transform="translate(64, 0) scale(-1,1)" d="M18.625,44.982L32,15.981l13.375,29.001L32,42.96L18.625,44.982z"/>
<path opacity="0.4" fill="var(--color-3)" enable-background="new    " d="M32,0C14.327,0,0,14.294,0,31.928
	c0,17.632,14.327,31.927,32,31.927c17.672,0,32-14.295,32-31.927C64,14.294,49.673,0,32,0z M32,59.523
	c-15.276,0-27.658-12.355-27.658-27.595C4.342,16.687,16.725,4.333,32,4.333c15.273,0,27.657,12.355,27.657,27.595
	C59.657,47.168,47.273,59.523,32,59.523z"/>
</svg>
</div>

CSS

.medvedko svg {
  --color-1: red;
  --color-2: yellow;
  --color-3: orange;
}

.medvedko svg:hover {
  --color-1: green;
  --color-2: blue;
  --color-3: pink;
}