Lucided.dev, some icons not working?

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 :
image
So the icon is filled and I don’t want to.


  1. Any idea of why the first try didn’t work Is it a bug or something to resolve on my side ?
  2. Or for the second option, do you have any idea of what cause the svg to be filled insted of empty ? :slightly_smiling_face:
1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.