> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/mantis-vuetify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codedthemes.gitbook.io/mantis-vuetify/theme-config/color-presets.md).

# Icons

Mantis Vuetify is pre-configured with the Ant Design Vue

### Ant Design icons

Mantis is pre-configured with the most popular font library Ant design icons.

<https://antdv.com/components/icon>

```typescript

import { PlusOutlined } from "@ant-design/icons-vue";

// usage
<PlusOutlined :style="{ fontSize: '20px' }" />
                            
```

### Material Design icons

Material icons svg using vuetify setup.

<https://vuetifyjs.com/en/features/icon-fonts/#mdi-js-svg>

Make one different file for imports usable icons and use it.

MDI icon file: `src/plugins/mdi-icon.ts`

```typescript
// if you want to use mdi new icon then add like this
import { mdiHome } from '@mdi/js';

export const icons = {
  home: mdiHome,
};
```

```javascript
// Usage
<v-icon icon="$home"></v-icon> // Do not forgot to add $ syntax before icon name
```