How to make the component Icon appear on the same line.

[vhtmui]

Im a beginner, and i can't make the Icon on the same line, they display like this.

1<Icon name="star" size="1rem" />2<Icon name="star" size="1rem" />3<Icon name="star" size="1rem" />

[HiDeoo]

👋 You should be able to target the specific icons you wish to display inline by passing a custom CSS class to the icon component:

text <Icon name="star" class="inline-icon />

Then, you would need to add custom CSS styles for this new class by specifying a path to a CSS file in astro.config.mjs:

export default defineConfig({
  integrations: [
    starlight({
      title: 'Your docs',
      customCss: [
+        // Relative path to your custom CSS file.
+        './src/styles/custom.css',
      ],
    }),
  ],
});

And in src/styles/custom.css, add a style for the .inline-icon class to display the icon inline:

.sl-markdown-content .inline-icon {
  display: inline;
}

[vhtmui]

Seems it doesn't work, in mdx file :

text <Icon name="star" class='inline-icon' /> text

In custom css :

.inline-icon {
	display: inline;
	color: red;
}

and it looks like this :

[HiDeoo]

Ah indeed, not something I can test right now as I'm on a phone, but the default Starlight Markdown style should enforce that.

I would guess that switching to .sl-markdown-content .inline-icon for the selector in your custom CSS file would do the trick (I'll edit my initial reply).

[vhtmui]

it do work now, thank u 👍