Blurry MaterialDesignIcons

Issue #18 resolved
Nathan SALAUN created an issue


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.

Comments (11)

  1. Jens Deters repo owner

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

  2. Nathan SALAUN reporter

    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 =/

  3. Jens Deters repo owner

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

    This is mine:

    public class AppMaterialIconsVerification extends Application {
        public void start(Stage primaryStage) throws Exception {
            HBox root = new HBox();
            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.setTitle("Material demo");
        public static void main(String[] args) {


    OSX 10.11.1, JDK 1.8.0_60

  4. Nathan SALAUN reporter

    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 ?

  5. Jens Deters repo owner

    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");
  6. Nathan SALAUN reporter

    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.

  7. 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.

  8. 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)

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

  9. Log in to comment