Hello again. Another release of JMetro this time the main highlight is support for free high quality icons.

These icons are available for free in Windows 10 machines (you’ll need to use a fallback on other OSes), you don’t have to download anything. You also don’t need to be using the JMetro theme to take advantage of this icon classes. You can use them even if you’re using Modena or any other theme.

Other than that some new small tweaks and fixes to existing styles. Keep reading for details.

Free Fluent Design style icons

Windows 10, provides free high quality icons. These are available through the new “Segoe MDL2 Assets” font readily available for free in Windows 10.

JMetro has now a class named MDL2IconFont. This class allows you to easily add these icons to your application whether or not you’re fully using the JMetro theme.

Since MDL2 icons are font icons it was decided to have MDL2IconFont class extend from Label.

...
MDL2IconFont iconFont1 = new MDL2IconFont("\uE703");
iconFont1.setSize(30);
HBox icons = new HBox();
icons.getChildren().add(iconFont1);
... 

The output:

MDL2IconFont example

For the icon you need to pass in the unicode code, in this case “E703”. For a reference you can check out this list of MDL2 icons: https://docs.microsoft.com/en-us/windows/uwp/design/style/segoe-ui-symbol-font. It’s not a complete list and AFAIK the only way right now to see the complete list is to run the “Character Map” application of Windows and check out the “Segoe MDL2 Assets” font (which isn’t the greatest way to browse for icons).

Being a font you can change the icons color and size easily. And JMetro already has default colors for the icons for theLIGHTand the DARK theme style.

Stacking up icons

MDL2 icon font has also been made so you can stack up icons one on top of the other easily to produce more complex icons. Here’s an example:

Segoe MDL2 FavoriteStar icon
Segoe MDL2 FavoriteStarFill icon

Stacking this 2 together and changing the FavoriteStarFill icon color to yellow, you can produce the following result:

Stacking up icons example

And here’s the code:

...
MDL2IconFont starFill = new MDL2IconFont("\uE735");
starFill.getStyleClass().add("star-fill");
MDL2IconFont star = new MDL2IconFont("\uE734");
MDL2IconCollection collection1 = new MDL2IconCollection(starFill, star);
collection1.getStyleClass().add("star-icons");
HBox icons = new HBox();
icons.getChildren().add(collection1);
... 

And the CSS:

.star-icons {
    -fx-font-size: 30px;
}

.star-icons .star-fill {
    -fx-text-fill: orange;
} 

MDL2IconCollection is the JMetro class that allows you to more easily stack icons.

Some icons are also set to be placed at the top left or bottom right, etc.. There’s also other icons that are made so they can be staked together in different ways. For example you can stack a “signal” icon with a “lock” icon that is set to appear at the top left and achieve the following result:

Stacking up icons that have different positions

Pros and Cons

Pros of using these icons:

  • Highest quality icons possible, professionally crafted by Microsoft;
  • They look sharp and good at any resolution since they are vector based;
  • Easily change colors by changing their text fill;
  • Ability to stack them up to create more complex icons;
  • The same icons that are used on Microsoft’s Windows applications so they’ll be instantly recognizable;
  • Immediately and freely available on Windows machines without any need to download anything or need for any additional configurations;
  • JMetro automatically changes their color depending on whether you’re using the LIGHT or DARK Style so they fit better.

Cons:

  • Only available on Microsoft OS (their license doesn’t allow them to be used outside of Microsoft’s products). When using other OSes you need to use a fallback;
  • Since they are fonts and not SVG you can’t tweak additional properties easily, like for instance, the stroke.

Additional style tweaks and fixes

Here’s the list of additional tweaks and fixes in this release:

  1. SplitPane – Fix wrong background color around SplitPane’s borders
  2. TabPane Underlined – Disabled Tabs shouldn’t have hover effects
  3. ComboBox – Have pressed effect when combobox is in showing state (showing popup)
  4. ThemeTester – Add Spinner to alignment test

That’s all for now, follow me on twitter if you want to keep up-to-date.

6 thoughts on “JMetro icons (version 8.6.9 and 11.6.9)

    • Thanks also Saeid, for your efforts in helping out, namely by registering pertinent issues.

      The benefits right now are: the icon color changes automatically to adjust for the current Style (DARK or LIGHT) of JMetro and also it tries not to ever be replaced with “…” which can happen on a Label if the space available is short. Other than that, other advantages and features may come in the future but I haven’t thought of any at the moment.

      Cheers and thanks,

      • Interesting! Those are useful advantages, however since it cannot be embedded in fxml format I will probably continue to use style classes. Please keep up the good work. Fantastic library!

          • Hi,

            first of all: thank you very much for your work!

            However, I don’t know how to use the class in FXML either, maybe you could provide a short example how you can embed MDL2IconFont in FXML?

          • Hi Karl,

            MDL2IconFont extends from Label, so you can use it in FXML like a Label instance. All that should then be needed is for you to set its text property to an icon unicode code, like for instance “\uE701”.

            Cheers,

Leave a Reply

Your email address will not be published. Required fields are marked *