How to add SVG icons for apps

This page explains how you can provide and use custom SVG icons for apps.

Introduction

Every Magnolia app has an icon assigned to it. The icon can be defined in the app descriptor with the icon property.

Where the icon is displayed

It is displayed:

  • In the App launcher:
    App launcher displaying icons

  • In the tab name of the first subapp:
    Icon displayed in the tab name of the first subapp

  • In the Find Bar search result list when the result type is an app:
    Icon displayed in the Find Bar search result list

Providing and referencing a custom icon

To use a custom icon for an app, you must:

  • Provide an SVG file in a Maven module that is included in your webapp bundle.
    The SVG file must be located in the $maven-module/src/main/resources/VAADIN/appicons folder.

  • Reference the icon in the app descriptor by setting the property icon. Its value must be the filename without the svg suffix.

Example

  1. In your Maven module, add the fast-vehicle-icon.svg file to the src/main/resources/VAADIN/appicons folder.

    my-foobar-module/
    ├── pom.xml
    └── src
        └── main
            └── resources
                └── VAADIN
                    └── appicons
                        └── fast-vehicle-icon.svg

    Make sure to add my-foobar-module to your webapp bundle.

  2. Reference the icon from the app descriptor of your custom app.

    /content-type-examples/apps/tourVehicles-app.yaml

!content-type:tourVehicle
icon: fast-vehicle-icon

Result

A custom icon displayed in the App Launcher


A custom icon displayed in the first subapp tab

Reusing app icons from the UI framework

Instead of using a custom app icon, you can also reference and use app icons that are part of the UI framework (see the Magnolia app icons gallery).

Icon resolution strategy

MagnoliaAppIcon is used to resolve custom app icons or default to a fallback icon. If no SVG icon (logo) or font icon (forCssClass) is defined, the default SVG app icon will be used as fallback.

MagnoliaAppIcon.forName(logo)
                .or(MagnoliaIcons::forCssClass)
                .or(MagnoliaIcons.APP)
                .ifPresent(...);
Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the DX Core docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules