Page History

...

Icons used in Magnolia come from the pictographic MagnoliaIcons font. Each icon is a character. The character is a vector format rather than a bitmap, which means you can style the icons with CSS and display them in various sizes without repeating the asset itself.

...

Using a custom icon font

To use a custom icon font:

1. Create an icon font.
2. Create a CSS file which references your custom font. See how the magnolia-icons.scss CSS file uses the @font-face declaration.
3. In the CSS file, specify classes for your icons. Use a namespace that will prevent collision with Magnolia's native classes. For example icon-mycompanyname-shop-app instead of icon-shop-app.
4. Configure a custom Vaadin theme that is different from the default admincentral theme. Your Vaadin theme should include admincentral theme and it needs to compile it. See Using ecustom custom styles in your Magnolia app.