# Icon Font

In order to use icon fonts in the project, icon files in SVG format must be copied to the **assets/svg-icons** directory. After this process, the pz-icon-font script in the project automatically edits the file names and creates an icon font named **pz-icon**.

## <mark style="color:red;">Creating the Icon Font​</mark> <a href="#creating-the-icon-font" id="creating-the-icon-font"></a>

SVG files copied to the assets/svg-icons directory are automatically converted to icon fonts with the **dev**, **dev:pure** or **build** command with yarn or npm. The names of SVG files are automatically converted to slugs before icon font conversion. For example, after the Add To Cart.svg file is copied to the directory and npm/yarn commands are executed, it turns into add-to-cart.svg. There are now slug names of icons in the created icon font.

## <mark style="color:red;">Using the Icons​</mark> <a href="#using-the-icons" id="using-the-icons"></a>

Icons with the names of SVG files that are converted to automatically created icon font and slug names become ready for use. Icon can be used for `Add To Cart.svg` example as follows.

```
<i class="pz-icon-add-to-cart">
```

We use pz-icon mixin as **@include pz-icon ("icon-name")** to include an icon in any selector in CSS. Example usage is as follows:

```
.add-to-cart {
 @include pz-icon('add-to-cart');
}
```

The icon used as pz-icon-add-to-cart class in the example above can now be used as add-to-cart class.

## <mark style="color:red;">Using the Multicolor Icons​</mark> <a href="#using-the-multicolor-icons" id="using-the-multicolor-icons"></a>

Technically, icon fonts do not support multicolor features. For this reason, multicolored icons should be used as images. By adding mc-prefix in front of SVG file names, it is ensured that these files are multicolored and automatically copied to the static folder. For example, for Google Logo.svg example, the filename should be mc-google-logo.svg. The use of icon for this example is as follows:

```
<img src="{{ static('img/mc-google-logo.svg') }}">
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.akinon.com/technical-guides/project-zero/django/project-structure/icon-font.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.