Home
Projects
Download
Support
Sponsors
Sponsor Benefits
Buy Gifts
Donate Now
Join Us
Open Cooperation
Contribute
Contributors (26)
Events (1)
Academy
Outsourcing
Contact Us
Outsourcing
Open Cooperation
Sponsor
Others
Recruitment
Ask Us
Chat With Us
About Us
Back to project ezyplatform

Guide to Creating Icons for EzyPlatform Plugin

Updated at 1775550414000
In EzyPlatform, by default you can use icon fonts from Font Awesome v5, Bootstrap Icons, or Ionic v2. This is the fastest option when your plugin only needs a generic icon. However, if none of those icons can represent your plugin’s brand clearly, you can follow the steps below to create a custom icon.
The important point is that EzyPlatform does not force plugins to use a single icon format. As long as you provide a CSS class that the menu can use, your icon can be rendered from an image, a custom font file, or even plain text styled as a brand mark.

General idea

The overall flow can be summarized like this:
flowchart TD
    A[Choose how the icon will be rendered] --> B{Icon type}
    B --> C[Image: PNG or SVG]
    B --> D[Font file: woff, woff2, or ttf]
    B --> E[Text font: brand abbreviation]

    C --> F[Place assets in static resources]
    D --> F
    E --> F

    F --> G[Create a CSS class for the icon]
    G --> H[Register icon.css in the admin UI using a ViewDecorator]
    H --> I[Attach the icon class to the plugin menu]
    I --> J[Restart and verify the result]
In short, the menu only needs a CSS class name. How that class renders the icon is entirely up to your plugin.

Step 1: Choose the right icon type

You can choose one of the following three approaches.

Use an image

This is the easiest approach when your plugin already has a finished logo.
It works well when:
  • you already have a PNG or SVG logo
  • you want to preserve the exact brand identity
  • you want the quickest implementation

Use a custom icon font

This approach is suitable when your plugin has its own icon set or when you want icons to behave like a professional icon library.
It works well when:
  • your plugin has multiple branded icons
  • you want the icon to scale cleanly like a font
  • you want to manage icons as a font-based icon set

Use text font

This is a simple approach when you do not have a final logo yet but still want a recognizable brand mark, such as AI, CRM, PG, or EZ.
It works well when:
  • you do not have an official logo yet
  • you want a fast setup
  • you only need a short and readable brand mark

Step 2: Put assets into static resources

After choosing the icon type, place the required assets inside your plugin’s static resources.
Example:
src/main/resources/static/your-plugin/images/your-plugin-logo-gray.png
src/main/resources/static/your-plugin/fonts/your-plugin-icon.woff2
src/main/resources/static/your-plugin/css/icon.css
If you use an image, you need an images directory.
If you use a font file, you need a fonts directory.
If you use text font, usually only the CSS file is needed, unless you also want to load a dedicated typeface.

Step 3: Create a CSS class for the icon

This is the most important step, because the plugin menu will use this class directly.

Option 1: Render the icon with an image

.icon {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
}

.icon-your-plugin-logo {
    background-image: url("/your-plugin/images/your-plugin-logo-gray.png");
}
This approach is simple, predictable, and very suitable for branded logos.

Option 2: Render the icon with a custom font file

@font-face {
    font-family: "YourPluginIcon";
    src: url("/your-plugin/fonts/your-plugin-icon.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

.icon-font {
    display: inline-block;
    font-family: "YourPluginIcon";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    vertical-align: middle;
}

.icon-your-plugin-logo::before {
    content: "e001";
}
With this approach, the icon is rendered from your plugin’s own font. If you have several branded icons, this can be a very clean solution.

Option 3: Render the icon with text font

.icon-text-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    font-family: "Arial", sans-serif;
    font-size: 0.7em;
    font-weight: 700;
    line-height: 1;
    border-radius: 4px;
    background: #6c757d;
    color: #fff;
    vertical-align: middle;
}

.icon-your-plugin-logo::before {
    content: "AI";
}
This approach works well when you want to show a short brand abbreviation as a small badge in the menu.

Step 4: Register the CSS file in the admin UI

Once icon.css is ready, your plugin needs to register it so the admin UI loads the stylesheet.
In the current codebase, this is done through a ViewDecorator. The idea is to append the CSS path to the list of additional style files for the view.
Example:
@EzySingleton
public class YourPluginIconViewDecorator implements ViewDecorator {

    @Override
    public void decorate(HttpServletRequest request, View view) {
        view.appendValueToVariable(
            VIEW_VARIABLE_ADDITIONAL_STYLE_FILES,
            "/your-plugin/css/icon.css"
        );
    }
}
After that, the admin interface can use any icon classes defined by your plugin.

Step 5: Attach the icon class to the plugin menu

Once the CSS class is available, you only need to reference it in the plugin menu configuration.
Example for an image-based icon:
top.your_plugin=/your-plugin ; icon icon-your-plugin-logo
Example for a custom font icon:
top.your_plugin=/your-plugin ; icon-font icon-your-plugin-logo
Example for a text-based icon:
top.your_plugin=/your-plugin ; icon-text-brand icon-your-plugin-logo
If your plugin has child menu items, you can still use standard icons from Font Awesome, Bootstrap Icons, or Ionic for those entries. A very practical pattern is:
  • use a branded custom icon for the main plugin menu
  • use standard icon fonts for submenus
This gives you brand recognition without making the admin UI feel inconsistent.

Step 6: Verify the result

After everything is wired up, check the following:
  • whether icon.css is loaded in the admin UI
  • whether the image or font file path is correct
  • whether the icon class name in the menu is correct
  • whether the icon is visible enough on the admin background
  • whether the icon size matches the surrounding menu items
If the icon does not look right, you can adjust:
  • width and height
  • font-size
  • background-size
  • colors
  • whitespace inside the image
  • the asset type itself, for example switching from PNG to SVG or from text to a font file

Choosing the best option

You can choose based on your actual needs:
  • Use an image if you already have a brand logo and want the quickest implementation.
  • Use a custom font file if you need multiple branded icons and want a scalable icon system.
  • Use text font if you only need a short, editable brand mark and do not yet have a finished logo.

Conclusion

In EzyPlatform, plugin icons are not limited to a single format. You can use an image, a custom font file, or text font, as long as you end up with a CSS class that the plugin menu can use. So if none of the icons from Font Awesome, Bootstrap Icons, or Ionic can represent your plugin properly, you can build a custom icon in the way that best fits your product.

Table Of Contents