Magnolia 6.0 reached end of life on June 26, 2019. This branch is no longer supported, see End-of-life policy.
This page explains how you can provide and use custom SVG icons for apps.
Every Magnolia app has an icon assigned to it. The icon can be defined in the app descriptor with the icon
property.
In Magnolia 6.0, an app icon must be a file in the SVG image format. Reusing an icon from the Magnolia icon font is no longer possible. An exception is the app-icon
character used by Magnolia as the fallback icon.
It is displayed:
To use a custom icon for an app, you must:
$maven-module/src/main/resources/VAADIN/appicons
folder.icon
. Its value must be the filename without the svg
suffix.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.
Reference the icon from the app descriptor of your custom app:
!with-type:tourVehicle icon: fast-vehicle-icon
Instead of using a custom app icon, you can also reference and use app icons that are part of the UI Framework, see their names in the Magnolia app icons gallery.
If you do not specify the icon
property in the app descriptor, the system uses the icon-app
image as the default icon.
If you reference an SVG image that does not exist, the system uses the icon-app
character from the Magnolia icon font as the fallback icon.