Titre souligné avec icon devant en bootstrap5 ?

Bonsoir
Je dois choisir des icones différents pour une page détail d'une formation/événement et je préférerais ne pas utiliser de fichier pour des questions d'extensions du cms

je vois une icone https://icons.getbootstrap.com/icons/calendar/ qui a pour code

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
  <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg>

Je suis parti d'un bout de code donné par @_laurent qui fonctionne bien
...

url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2216%22 height%3D%2216%22 fill%3D%22currentColor%22 class%3D%22bi bi-calendar%22 viewBox%3D%220 0 16 16%22%3E%0D%0A  %3Cpath transform='translate(0,4) scale(0.75)' d%3D%22M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z%22%2F%3E%0D%0A%3C%2Fsvg%3E");

et je suis arrivé à

<h2 class="bi-calendar">mon titre</h2>

h2 {
border-bottom: solid;
}

h2.bi-calendar::before {
    content: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2216%22 height%3D%2216%22 fill%3D%22currentColor%22 class%3D%22bi bi-calendar%22 viewBox%3D%220 0 16 16%22%3E%0D%0A  %3Cpath transform='translate(0,4) scale(0.75)' d%3D%22M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z%22%2F%3E%0D%0A%3C%2Fsvg%3E");    
}

1/ si j'ai bien compris, je dois placer le contenu de la variable "d" du path d'un autre icone dans le code ci-dessus.
Cela me semble laborieux, est-ce qu'il y a un outil qui fait cela plutôt qu'à la main?
2/ d'autant que le rendu me met une petite icone et j'entrevois dans la ligne la hauteur a réglée mais je ne comprends pas l'unité. Comment faire ?
Modifié par HDcms (10 Jan 2022 - 20:29)