more icons for "symbol"

[xarthurx]

Hi, I'm using a lot of icons from Iconify and would also like to use a different icons for the symbol.

Usually when you use such an icon in a html, you can just define a class="i-xxxx-xxx" and with a correct setting of css framework, it will work.

You can check examples here: https://unocss.dev/presets/icons

However, when I try to do such things with markdown-it-anchor:

      permalink: mdAnchor.permalink.linkInsideHeader({
        symbol: ` 
            <div class="i-ph-anchor-simple-thin" />
            <div class="i-material-symbols-link" />
            @
        `,
        placement: "before",
      }),

it seems the code will keep adding nested DOM and doesn't render as an icons...

Is there a way to make it work?

[valeriangalliat]

Hi! It seems that:

<div class="i-ph-anchor-simple-thin" />
<div class="i-material-symbols-link" />
@

Is equivalent do doing

<div class="i-ph-anchor-simple-thin">
<div class="i-material-symbols-link">
@
<!-- rest of the content -->
</div>
</div>

Which doesn't sounds like it is what you want

In a React JSX context, <div /> would do what you want, maybe the documentation you got that code from was targeted at JSX?

In the case of vanilla HTML you want an explicit closing tag:

<div class="i-ph-anchor-simple-thin"></div>
<div class="i-material-symbols-link"></div>
@

Cheers

[xarthurx]

Thx. The HTML grammar issue got resolved by your method.

There's another problem, however, is a bit interesting.

• <div class="i-material-symbols-link"></div> will rendered as an icon in html.
• If I use <div class="i-material-symbols-link"></div> in the symbol part only, it will not be rendered as an icon. Nothing is shown.
• However, if I also use <div class="i-material-symbols-link"></div> outside the markdown part, but in the same webpage (for instance, before I call markdown-it to render the markdown file into my page), and then both the html section and the symbol part will be successfully rendered as an icon.

I guess the reason is when only replace the symbol part, the "replacing" process happens after the css engine parse the page and got triggered. So even the html code got replaced/injected, it actually doesn't trigger the css engine -- as a result, the code doesn't take effect...

[valeriangalliat]

That's gonna depend a lot on your build system but it sounds like you have a preprocessing tool that includes the CSS for the icons that it detects in your HTML, but it doesn't account for the ones in the Markdown rendered content

You're correct you would need to make it detect the icons after the Markdown is done processing for this to work 👍