# Icons

# Overview

We have used Material Design Icons from the Iconify library in the whole template. You may visit the site here (opens new window) and check all the icons here (opens new window). Users are free to use any icon library of their choice.

WARNING

We are using the offline icons with the help of Iconify bundle and we suggest you do the same. If you want to use very few icons from other libraries, then you may use online icons directly from the public API of Iconify.

Heads Up! (TypeScript version only)

The src/@iconify/tsconfig.json file is different from the tsconfig.json file and thus do not delete the src/@iconify/tsconfig.json file from your project; otherwise, you will not be able to generate icon bundle from the yarn build:icons command.

# Iconify Bundle

When Iconify icon component renders an icon, if icon data is not available, the component attempts to load data for an icon from Iconify API.

Even though loading icon data from API is very fast, it is not instant and it requires internet access. By providing icon data for most used icons, you guarantee that icon data is ready when a component needs it, rendering icons instantly.

This also allows rendering icons when internet access is not available and you are no longer relying on third-party service.

The following files are necessary to generate Iconify bundle:

  • src/@iconify/build-icons.js
  • src/@iconify/build-icons.ts (typescript version only)
  • src/@iconify/icons-bundle.js
  • src/@iconify/tsconfig.json
  • package.json

# How to Generate Bundle?

You can generate the bundle with a wide variety of emojis, flags, brand logos, SVGs & icons and use them even when internet access is not available. To generate such icons, you just need to add your desired icon library, any specific icon(s), a custom JSON file created by you, custom SVG(s) created by you or any emoji(s).

# Install the icon libraries

To install an icon library from the Iconify collection, you will need to install the specific icon library that you want to use. Here's how you can do that:

yarn add @iconify-json/library-name

# For Example

yarn add @iconify-json/mdi

TIP

Each icon set is available as a separate NPM package. Package name is @iconify-json/{prefix}, where "{prefix}" is icon set prefix.

# Generate all icons from an icon library

To add all the icons from an icon library provided by Iconify, you just need to do the following in the src/@iconify/build-icons.ts file:

# Generate some icons from an icon library

To add some icons from an icon library provided by Iconify, you just need to do the following in the src/@iconify/build-icons.ts file:

# Generate some icons from different libraries

To add some icons from different libraries provided by Iconify, you just need to do the following in the src/@iconify/build-icons.ts file:

# Generate some icons from a custom JSON file

To add some icons from a custom JSON file, you need to follow the file format according to this (opens new window) and do the following in the src/@iconify/build-icons.ts file:

# Generate some icons from some custom SVG files

To add some icons from some custom SVG files, you need to create some SVG files in a single folder inside the src folder and do the following in the src/@iconify/build-icons.ts file:

# Generate some icons from some custom Emojis

To add some icons from some custom emojis, you need to create some emojis in a single folder inside the src folder and do the following in the src/@iconify/build-icons.ts file:

# Run the command

Once you have set the target and updated the import statement, then you need to run the following command in the root (where your package.json file exists):

# How is the bundle generated?

# TypeScript

The bundle is generated once you have added the icons, set the target, updated the import statement and run the command.

When you run the command, the src/@iconify/build-icons.ts file is compiled to the src/@iconify/build-icons.js file. Once the compilation is completed, the compiled file gets all the icon data from Iconify. After retrieving the icon data, the icon data is wrapped in a callback to create a JavaScript file. The callback function used is addCollection() which is provided by the @iconify/vue package.

In our case, the final JavaScript file is created as the src/@iconify/icons-bundle.js file. In this file, the icon data is collected and wrapped with the addCollection() callback function. So you don't have to handle anything from your side. You just have to import this file into the src/main.ts file.

# JavaScript

The bundle is generated once you have added the icons, set the target, updated the import statement and run the command.

When you run the command, the src/@iconify/build-icons.js file gets all the icon data from Iconify. After retrieving the icon data, the icon data is wrapped in a callback to create a JavaScript file. The callback function used is addCollection() which is provided by the @iconify/vue package.

In our case, the final JavaScript file is created as the src/@iconify/icons-bundle.js file. In this file, the icon data is collected and wrapped with the addCollection() callback function. So you don't have to handle anything from your side. You just have to import this file into the src/main.js file.

# Usage

We have already integrated the Iconify icon library into our Vuetify project, so we can use the VIcon component to render the icons directly.

# Props

You may visit this docs (opens new window) provided by Vuetify to refer to all the props of the VIcon Vuetify Component.

# How to use VIcon Vuetify Component?

We can use Vuetify's VIcon component:

<VIcon icon="mdi-home"></VIcon>

In the example given above, mdi is Material Design Icons (icon library provided by Iconify) and home is an icon which is in the mdi icon library.

# Use some different icon library

Suppose you want to use the Font Awesome Solid icon library. Please follow these instructions to add the icons from the Font Awesome Solid icon library. Here is an example to use an icon from the Font Awesome Solid icon library:

<VIcon icon='fa6-solid-bicycle' />

In the example given above, fa6-solid is Font Awesome Solid icon library and bicycle is an icon which is in the fa6-solid icon library.

# Style an icon using Vuetify component

Here is an example to change the color of an icon using an Vuetify component:

<VIcon color="primary" icon="mdi-vuetify"></VIcon>

# Use icon from Iconify public API Advance

By default, Iconify icon components use Iconify public API. Iconify icon components also cache loaded icons in the browser cache and/or browser storage, so icon data needs to be loaded only once.

You need internet access to load the icons from the Iconify public API for the first time. Otherwise, the icon will not be rendered on your page and a console error will come.

To render the icons from the Iconify public API, you must not include those icons in the Iconify bundle.