Blurry MaterialDesignIcons

[Nathan SALAUN]

Hello,

The MaterialDesignIcons are blurry compared to the regular MaterialIcons. Here is an example of what I mean, the left button is using a MaterialDesignIconView whereas the right one is using a MaterialIcon.

We can clearly see that the left one is slightly more blurry than the right one. It's the same with every MaterialDesignIcon. I've got the default sizes and styles.

[Jens Deters]

Can't get your point. Your whole screenshot is blurry though ;-)! These are MaterialIcon: ...and these are MaterialDesignIcons:

[Nathan SALAUN]

The left icon is not as precise as the right icon, it's slightly blurry

[Jens Deters]

Please share more informations, so I can reproduce.

[Nathan SALAUN]

Well, create two buttons with normal size, add them respectively a MaterialIconView graphic and a MaterialDesignIcon one (without any special attribute) and you'll notice that the MaterialDesign one is blurry compared to the other one.

It looks like a very low resolution image which has been resized using resampling, it's... blurry, I can't really explain more =/

[Jens Deters]

Well you could start with sharing your code, OS information, JDK version....

This is mine:

public class AppMaterialIconsVerification extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        HBox root = new HBox();
        root.setSpacing(10.0);

        Button materialButton = new Button("MaterialIcon");
        Button materialDesignButton = new Button("MaterialDesignIcon");

        GlyphsDude.setIcon(materialButton, MaterialDesignIcon.ACCOUNT_CIRCLE);
        GlyphsDude.setIcon(materialDesignButton, MaterialIcon.ACCOUNT_CIRCLE);

        root.getChildren().addAll(materialButton, materialDesignButton);

        Scene scene = new Scene(root, 500, 800);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Material demo");
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

OSX 10.11.1, JDK 1.8.0_60

[Nathan SALAUN]

Okay, I tested with your code and the render is actually different than what you have ; the MaterialDesignIcon is different, see by yourself :

I'm on Windows 10 using JDK 1.8.0_66. I don't know what is causing this difference, maybe the OS ? Is there any kind of font smoothing in JavaFX that I would need to enable or maybe disable ?

[Jens Deters]

I see... windows. I remember, there was an issues with the default font sizes (1em). Please try like:

 GlyphsDude.setIcon(materialButton, MaterialDesignIcon.ACCOUNT_CIRCLE,"1.2em");
        GlyphsDude.setIcon(materialDesignButton, MaterialIcon.ACCOUNT_CIRCLE, "1.2em");

[Nathan SALAUN]

The icon is bigger, but still blurry. I've tried to increase little by little and the icon seems precise (compared to the regular one) at 6 or 8 em only.

[Peter Rogge]

Hi. General have Windows 10 problems with the scale from apps. Mircosoft told it feature - i told it bug. Some apps haven't the problem, but most of them. They are scaled and blurred - ugly. I have found in Google some solution to reduce the default scale, but still most apps are to great and scaled.

[Jens Deters]

For me its a Windows 10 bug.

[mr blob]

This is still an issue, and I think it has nothing to do with Windows 10. As you can see on the left, the icons are blurry, and on the right they are clear. This is on Windows 10 for both. The difference is, I set up the size differently. The left was set up through the constructor:

‌

  MaterialDesignIconView materialDesignIconView = new MaterialDesignIconView(MaterialDesignIcon.SEND, "2em")

The right was set up using setSize

  MaterialDesignIconView materialDesignIconView = new MaterialDesignIconView(MaterialDesignIcon.SEND)
  materialDesignIconView.setSize("2em");

‌

This is a problem because setSize is deprecated in later versions I believe…