Configuration Reference

Configure the icon integration

Astro Icon is an integration built on top the Astro web framework. You can configure your project inside the astro.config.mjs configuration file:

astro.config.mjs

import { defineConfig } from 'astro/config';
 import icon from 'astro-icon';

export default defineConfig({
  integrations: [
    icon({ /* options */ })
  ]
});

You can pass the following options to the icon integration.

include

type: Record<string, string[]>

Filter the specific icons to include from @iconify-json/* sets in the final server bundle.

import { defineConfig } from 'astro/config';
import icon from 'astro-icon';

export default defineConfig({
  integrations: [
    icon({
      include: {
        // Include only three `mdi` icons in the bundle
        mdi: ['account', 'account-plus', 'account-minus'],
        // Include all `uis` icons
        uis: ['*']
      }
    })
  ]
});

Caution

By default, all icons from every installed set are included!

When deploying an Astro site for server rendering, it is highly recommended to include only the icons that are needed.

iconDir

To use a local icon directory other than the default src/icons/, set the iconDir option.

import { defineConfig } from "astro/config";
import icon from "astro-icon";

export default defineConfig({
  integrations: [
    icon({
      iconDir: "src/assets/icons",
    })
  ]
});

svgoOptions

Control the behavior of local .svg optimization by customizing the svgo options.

Refer to the official svgo configuration options for more information.

import { defineConfig } from "astro/config";
import icon from "astro-icon";

export default defineConfig({
  integrations: [
    icon({
      svgoOptions: {
        multipass: true,
        plugins: [
          {
            name: "preset-default",
            params: {
              overrides: {
                // customize default plugin options
                inlineStyles: {
                  onlyMatchedOnce: false,
                },
                // or disable plugins
                removeDoctype: false,
              }
            }
          }
        ]
      }
    })
  ]
});