Changing the svg circle path color in mateiral icons

Question

I have the material svg added with fill and stroke properties

.sample {
  background-color: black;
}

svg >path:last-child {
  fill: white;
  stroke: #14B005;
}

What I want to achieve is, I don't want to have the circle with green, it should be white and if you zoom little the tick has a black checked line I think its the background color black, I need to remove both of these

how can I achieve this or should i use two tone from material icon

user_7394871 · Answer

The styling problem is that the circle and check mark are drawn with the same patch
I split one patch into separate patches. One patch for the circle, the second patch for the tick.

Splitting patches by second M command

It was:

path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z"/>

became

With this type of recording, it becomes possible to change the colors of the circle and the checkmark independently.

.sample {
  background-color: black;
}

.rect {
  fill: black;
  stroke: #14B005;
}  
.circle {
  fill: white;
  }
.check {
  fill: #14B005;
  stroke: none;
  stroke-width:1;
}

user_6159441 · Answer

Got a solution

Used another svg without any circle, just a tick
made the svg to border-radius:50% to look round
give the color for th svg and the path

.sample {
  background-color: black;
}

svg {
  border-radius: 50%
}

svg>path:first-child {
 fill: white;
}

svg>path:last-child {
 fill: green;
}

Changing the svg circle path color in mateiral icons

2 Answers