Icons

Solution

The system does not actually integrate the Element Plus icon library because Iconify is already included.

• Iconify Icons (Recommended)
• Using Alibaba Icon Library

Using Iconify Icons

Note

Iconify is a universal icon framework that includes icon sets such as FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji, and more. It contains over 150 icon sets and 200k icons, supporting many front-end frameworks.

It is generally recommended to search for icons on Icônes, an online icon search website based on Iconify, which offers a better user experience.

Attention

The copied icon format is: i-{collection name}:{icon name}

Using the MaSvgIcon Component

After finding the icon, copy the icon name and use the MaSvgIcon component to display the icon:

<!-- Paste the copied icon name into the name attribute -->
<ma-svg-icon name="i-vscode-icons:file-type-php" />

Using Class

You can use it directly via html tags, but note that asynchronous and concatenated string usage is not supported.

<span class="i-vscode-icons:file-type-php" />
<i class="i-vscode-icons:file-type-php" />

Offline Mode

Since Iconify icons are provided as an online service by default, the first call triggers an external network request to fetch the SVG raw data, which is then cached in localStorage. Subsequent calls will retrieve and display the icon directly from the cache. However, if there is no network, the icons may not display correctly.

To address this, the system provides a command: pnpm run gen:icons. Follow the command prompts to select the icon sets you need and choose the offline mode to generate an offline icon library.

Attention

The offline icon library generated by the command is also the icon collection displayed in the icon picker.

Using Alibaba Icon Library

Place the SVG icon files downloaded from the Alibaba Icon Library or other sources into the ./src/assets/icons/ directory, and use them via the MaSvgIcon component:

<!-- SVG icon file path ./src/assets/icons/newIcon.svg -->

<ma-svg-icon name="newIcon" />