🌟 Custom Icons for Rating Component

Community Resources
,
1

You can replace the default star shape with other icons using CSS and the d: path() property.
This preserves the original rating behavior, including dynamic and partial fills.

:bullseye: Icon Examples

1. :heart: Heart

/* ❤️ Heart */
[class^="wire-rating"] svg path {
  d: path("M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z");
}

2. :+1: Thumbs Up

/* 👍 Thumbs Up */
[class^="wire-rating"] svg path {
  d: path("M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z");
}

3. :white_check_mark: Check Mark

/* ✅ Check Mark */
[class^="wire-rating"] svg path {
  d: path("M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z");
}

4. :triangular_flag: Flag

/* 🚩 Flag */
[class^="wire-rating"] svg path {
  d: path("M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6h-5.6z");
}

5. :bookmark: Bookmark

/* 🔖 Bookmark */
[class^="wire-rating"] svg path {
  d: path("M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z");
}

6. :three_o_clock: Clock

/* 🕒 Clock */
[class^="wire-rating"] svg path {
  d: path("M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13h-1v6l5.25 3.15.75-1.23-4.5-2.67z");
}

7. :bell: Bell

/* 🔔 Bell */
[class^="wire-rating"] svg path {
  d: path("M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.93 6 11v5l-2 2v1h16v-1l-2-2z");
}

8.:fire: Fire

/* 🔥 Fire */
[class^="wire-rating"] svg path {
  d: path("M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16m0-1c-1.657 0-3-1-3-2.75 0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1 1.364 1 2.25C11 14 9.657 15 8 15");
}

:artist_palette: Optional: Colors

/* Selected (filled) */
[class^="wire-rating"] svg path[clip-path] {
  fill: red;
}

/* Unselected (empty) */
[class^="wire-rating"] svg path:not([clip-path]) {
  fill: rgba(255,255,255,0.2);
}

Note

This approach may not work in all cases.

3 Likes