> For the complete documentation index, see [llms.txt](https://docs.akinon.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.akinon.com/technical-guides/project-zero/django/project-structure/icon-font.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.