Hi,
What I’m trying to do
I’m trying to do some customized callouts. But for some obscure reason, some icons are working and some not.
Things I have tried
First try
For example with this CSS
.callout[data-callout="top"] {
--callout-color: 0, 119, 0;
--callout-icon: trophy;
}
.callout[data-callout="amélio"] {
--callout-color: 0, 119, 122;
--callout-icon: flag-triangle-right;
}
.callout[data-callout="test"] {
--callout-color: 0, 119, 122;
--callout-icon: award;
}
I have this result :
“flag-triangle-right” and “award” does work. But “trophy” doesn’t work.
Second try
Then, I tried a workaround, copying the svg :
That gave me the following code :
.callout[data-callout="top"] {
--callout-color: 0, 119, 0;
--callout-icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path>
<path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path>
<path d="M4 22h16"></path>
<path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path>
<path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path>
<path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"></path>
</svg>;
}
Which gave this result :
So the icon is filled and I don’t want to.
- Any idea of why the first try didn’t work Is it a bug or something to resolve on my side ?
- Or for the second option, do you have any idea of what cause the svg to be filled insted of empty ?