Change color of part of Material Icon

I would like to change only part of the color of Material icons (from google) like in the image. In the image it only shows the bottom bar changing color, not the entire A.

I went to several questions that only showed how to change the entire color of the materialize icon.

I realize that I can use svg, and I can break the image up into different paths and then specify the color of each of them as stated in jdnz's answer.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
  <path d="M5 17v2h14v-2z" fill="#00FFFF"/>
  <path d="M12 5.98L13.87 11h-3.74zM9.5 12.8h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1z"/>
  <path d="M0 0h24v24H0z" fill="none"/>
</svg>

However, I have several images, and I don't want to create many svg's.

Solution

If you use svg you can break the image up into different paths and then specify the color of each of them.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
  <path d="M5 17v2h14v-2z" fill="#00FFFF"/>
  <path d="M12 5.98L13.87 11h-3.74zM9.5 12.8h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1z"/>
  <path d="M0 0h24v24H0z" fill="none"/>
</svg>