B4J Question [SOLVED] [ABMaterial] Material Icons do not show up with ABMLabels in ABMaterial 2.00

[mindful]

Hi, I just saw that label icons (material icons not fontawsome) do not show up in version 2.00. All I get is a square instead of the actual icon.

This is some code i use:

    Dim x As ABMLabel
    x.Initialize(Page, "x", "xtestx", ABM.SIZE_H6, True, "")
    x.IconName = "mdi-action-3d-rotation"
    x.IconAlign = ABM.ICONALIGN_LEFT
    x.IconSize = ABM.ICONSIZE_LARGE
    Page.CellR(0,1).AddComponent(x)

Is this a bug ? has anyone encounted the same problem ?!

Later Edit: icons do not show with ABMButton either !

 

[mindful]

I figured out! In ABMaterial 2.00 the icon setting changed.

So if you want to use:
1. Google material icons (https://design.google.com/icons/)
x.IconName = "branding_watermark"

2. FontAwesome icons (http://fontawesome.io/icons/)
x.IconName = "fa fa-info-circle"

So now I have 2 questions
1. The old icons are obsolete ? Are they going to be used in the future ? Because I can't get them to work ...
2. What does the .IconAwesomeExtra on the ABMLabel do ?!

 

[alwaysbusy]

Just tested your code and it shows up fine. Maybe a caching problem?

You can use all three types. See in the demo ABMButton. It uses all three:

' add buttons
   Dim btn1 As ABMButton
   btn1.InitializeRaised(page, "btn1", "picture_as_pdf", ABM.ICONALIGN_LEFT, "BUTTON", "bluegrey")      '<-- New Google Icons
   page.Cell(2,1).AddComponent(btn1)
   
   Dim btn2 As ABMButton
   btn2.InitializeRaised(page, "btn2", "fa fa-home", ABM.ICONALIGN_LEFT, "BUTTON", "bluegrey")       ' <-- Awesome Icons
   page.Cell(2,1).AddComponent(btn2)
   
   Dim btn3 As ABMButton
   btn3.InitializeRaised(page, "btn3", "mdi-image-palette", ABM.ICONALIGN_RIGHT, "BUTTON", "bluegrey")    ' <-- Old Google Icons
   page.Cell(2,1).AddComponent(btn3)

IconAwesomeExtra is explained in the readme file:

The Initialize has now one extra parameter at the end: iconAwesomeExtra (You can pass "" if you do not use it)
In case the icon is an Awesome Icon, you can use the extra classes the Awesome Icon library provides:
examples: "fa-3x fa-pull-left fa-border"

see for more info: http://fontawesome.io/examples/

 

[mindful]

I tried your examples.

And something is wrong with the old icons: "mdi-action-3d-rotation" does not show, and "mdi-image-palette" (your example) show a chinese letter.

In version 2.00 there is no need for us to call page.UseFontAwesome = True, right ? Because I can't find it ..

PS. In the Demo the icon displays corectly .. as an image palette.

 

[alwaysbusy]

In version 2.00 there is no need for us to call page.UseFontAwesome = True, right ? Because I can't find it ..

No, the font-awesome css file is loaded automatically in 2.00

I still somehow suspect your browser is using cached/wrong css versions.

To be sure, delete in your projects www the folders /js, /css and /font (so no overwriting will happen).
copy the /js, /css and /font folder from the /library/www folder.

If one uses overwrite, this scenario can happen:

in the www folder, all css/js files are new BUT the .gz files are still the old ones. So if you run your app in debug mode, the .gz files are NOT recreated (only in release mode). If you surf to your webapp, the browser seess the OLD .gz files and loads them, hence you are not using the new versions of CSS/JS/Font.

Have you increased the AppVersion variable in ABMShared? This can solve (most) of those caching problems. Open it in Chrome, press F12, in the network tab make sure the cache is disabled, press F5.

 

[mindful]

I can't get old icons to work so i will switch to fontawesome..

I tried the following:
1. deleted the www forlder from project Objects, copied the one from the ABMaterial 2.0 Library folder, incresead the appversion, disabled the cache in chrome (F12->Network->Disable Cache). Same result i get a chinese letter instead of the mdi-image-palette and mdi-action-3d-rotation shows a square.
2. deleted the www folder, copied the one from ABMaterial 2.0 DemoDynamic, incresead the appversion ... Same result.
3. Copied the piece of code (from post #3) in the BuildPage from ABMPageTamplate changed the Cell values to (1,1) and run .... same result.

As my understanding goes this icons are fonts and maybe the old icons are mapped to the wrong font or the right font is missing this is why i see a sqare insead of the 3d-rotation... is there anyway to check this ? The thing is that the DemoDynamic show the correct icon. What could I've done to get this problem?

 

[mindful]

I found out the problem. The only different thing that i did in my app versus the demodynamic is i didn't use: page.SetFontStack("arial,sans-serif"). If I don't call this method the old google icons do not work properly.

 

[alwaysbusy]

@mindful Thank you for letting me know! I'll check out why this would be needed.