I want to display an icon even with more than one path. I know that I can make this happen by merging all the paths to 2 paths minimum where I can use the before and after to display the icon using an HTML element where I just need to pass the class name and with the iframe, I can make it visible on my screen.

So I have all these paths just to an icon. How to make the icon visible even with all these paths.

.icon-claus-santa-xmas-christmas-svgrepo-com .path1:before {
  content: "\e900";
  color: rgb(255, 96, 150);
}
.icon-claus-santa-xmas-christmas-svgrepo-com .path2:before {
  content: "\e901";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-claus-santa-xmas-christmas-svgrepo-com .path3:before {
  content: "\e902";
  margin-left: -1em;
  color: rgb(255, 64, 129);
}
.icon-claus-santa-xmas-christmas-svgrepo-com .path4:before {
  content: "\e903";
  margin-left: -1em;
  color: rgb(252, 228, 236);
}
.icon-claus-santa-xmas-christmas-svgrepo-com .path5:before {
  content: "\e904";
  margin-left: -1em;
  color: rgb(240, 250, 255);
}
.icon-claus-santa-xmas-christmas-svgrepo-com .path6:before {
  content: "\e905";
  margin-left: -1em;
  color: none;
}
.icon-claus-santa-xmas-christmas-svgrepo-com .path7:before {
  content: "\e906";
  margin-left: -1em;
  color: none;
}

I was thinking of doing on vanilla JavaScript and building the icon layer by layer by getting the name of the icon dynamically and looking for the CSS all these paths.

Is that possible? If not, what would be the best path (:D) to take?