> For the complete documentation index, see [llms.txt](https://support.emarketeer.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.emarketeer.com/docs/docs_se/referens/developer-advanced/app-navigation-icons.md).

# Ändra navigeringsikoner i mobilappen (Developer)

Hur du byter ikoner i navigeringsmenyn i en mobilappskomponent genom att redigera appens HTML i Developer Mode.

Den här guiden visar hur du byter ikoner i navigeringsmenyn i en mobilappskomponent.

Navigeringsmenyn använder ikoner från [Elusive Icons](https://elusiveicons.com/icons/). Du kan byta ut dem mot någon av de 300+ tillgängliga ikonerna genom att redigera appens HTML. Du behöver Developer-behörighet på ditt användarkonto för att göra dessa ändringar.

{% stepper %}
{% step %}

### Välj vilka ikoner du vill använda

Bläddra i ikonlistan på [elusiveicons.com](https://elusiveicons.com/icons/) och välj de ikoner du vill ha.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-922f897e5caeb5ad5d99295fdd51d504788535d6%2Fapp-elusiveicons-list.png?alt=media" alt="Listsidan med Elusive Icons-ikoner"></div>

Listsidan för Elusive Icons
{% endstep %}

{% step %}

### Slå upp ikonens tagg

Klicka på den ikon du vill använda. Leta efter ikonens el-tag — ikonnamnet som börjar med "el-". Till exempel har kalenderikonen taggen `el-calendar`. Notera taggen — du klistrar in den i HTML i ett senare steg.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-21565631f121da4e154e5e15200ffb8a5d740f26%2Fapp-elusiveicons-iconcode.png?alt=media" alt="Sidan för kalenderikonen på Elusive Icons"></div>

Sidan för kalenderikonen på Elusive Icons
{% endstep %}

{% step %}

### Kontrollera vilken stil på navigeringsmenyn som används

I eMarketeer kontrollerar du vilken stil din app använder för navigeringsmenyn. Inställningen heter **Navigation Menu** och finns högst upp på fliken Content för Content-blocket.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-9169c2d1e9bd9aa64b88a4c4cf571e7350b47b76%2Fapp-4-1-navigation-menu-style-setting.png?alt=media" alt="Plats för Navigation Menu-inställningen på fliken Content"></div>

Det finns tre stilar för navigeringsmenyn: Icons, Icon List och List. Notera vilken du använder — du behöver bara ändra ikoner för den stilen.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-c9d7240bd25033ba18d6fc3210d4864e7b388f64%2Fapp-4-5-navigation-menu-style-combined.png?alt=media" alt="De tre alternativen för navigeringsmenystil"></div>
{% endstep %}

{% step %}

### Öppna HTML-fliken

På mobilappskomponentens redigeringssida klickar du på **Enable Developer Mode** i verktygsmenyn till vänster. Markera Content-blocket (klicka till exempel på **container1 (Content)** i **Tree View**), klicka på **Edit Selected** och växla till fliken **HTML** i menyn till höger.

Om du inte ser länken Developer Mode, be en kontoadministratör att ge ditt användarkonto Developer-behörighet.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-6323ad41bea6804d098193e79fd3142cfc0c1b21%2Fapp-html-tab.png?alt=media" alt="Navigering till HTML-fliken i Developer Mode"></div>

Navigering till HTML-fliken i Developer Mode
{% endstep %}

{% step %}

### Hitta ikonen i HTML-koden

HTML-fliken har två ställen där ikoner definieras. Ett styr navigeringsstilen **Icon List** och det andra styr stilen **Icons**.

Den översta delen av HTML-koden märker varje sektion som `iconlist` eller `icons`. Varje navigeringsikon har sin egen undersektion. Leta där efter el-taggen för ikonen som används just nu, till exempel `el-time` eller `el-bookmark`.

#### Iconlist HTML

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-4113c2e4c030c3e9fd96e3b5fc698b89d20ebe20%2Fapp-iconlist.png?alt=media" alt="Plats för iconlist-ikonkoden i HTML"></div>

Plats för iconlist-ikonkoden i HTML (vanligtvis nära rad 113)

#### Icons HTML

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-940dddb8d5685b038a2805479a8f69e927a8a732%2Fapp-icons.png?alt=media" alt="Plats för icons-ikonkoden i HTML"></div>

Plats för icons-ikonkoden i HTML (vanligtvis nära rad 237)
{% endstep %}

{% step %}

### Byt ut ikontaggen och spara

Ändra den befintliga el-taggen till den nya för din valda ikon och spara HTML-koden. För att till exempel ändra "Company News" från en bokmärkesikon till en kalenderikon byter du ut `el-bookmark` mot `el-calendar`. Låt taggarna runt omkring vara — `el`, `el-inverse` och `el-fw` är desamma för alla ikoner i appkomponenten.
{% endstep %}
{% endstepper %}


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://support.emarketeer.com/docs/docs_se/referens/developer-advanced/app-navigation-icons.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.