Skip to content
starlight-plugin-icons

Code Block Icons

Once the plugin is installed, code fences automatically get a small icon. Icons are chosen either by the language or by the filename in the block’s title.


  1. Enable the features
    Section titled “Enable the features”
    astro.config.mjs
    Icons({
      codeblock: true,
      extractSafelist: true,
      starlight: { ... },
    })
  2. Add the cache to .gitignore
    Section titled “Add the cache to .gitignore”
    .gitignore
    .starlight-icons
  3. Install the Material Icon Theme collection
    Section titled “Install the Material Icon Theme collection”
    Terminal window
    npm i -D @iconify-json/material-icon-theme

Example

Section titled “Example”

Based on language

Section titled “Based on language”
```ts title="app.ts"
console.log('hi')
```

Rendered

app.ts
console.log('hi')

Based on filename

Section titled “Based on filename”
```md title="README.md"
# README
```

Rendered

README.md
# README

Customization

Section titled “Customization”

Set CSS variables to configure codeblock icons.

src/styles/custom.css
:root {
  --spi-codeblock-icon-size: 1.2rem;
  --spi-codeblock-icon-gap-right: 0.5rem;
  --spi-codeblock-icon-gap-left: 0.5rem;
}