JMetro icons (version 8.6.9 and 11.6.9)

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:

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:

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

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:

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.