🛠️CSS Hack: Custom Icons

You can actually use my reference and simply ask GPT to replace the <path> for you.

.click button[aria-label="Solicitar"] svg { 
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/></svg>') no-repeat center center;
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  background-size: contain;
}

.click button[aria-label="Solicitar"] svg > use { 
  display: none;
}

Alternatively, you can replace the “background SVG” by using mask and -webkit-mask, which allows you to color the icon using background.

Also, try testing it by removing the selector [aria-label="Solicitar"] since it may be translated. Let me know if it doesn’t work.

2 Likes