13.0p+ Material Icons problem in printingFS sample

[Blama]

Hi Isomorphic,

using this sample (v13.0p_2022-03-12) there is a 404 for

https://www-demos.smartclient.com/smartclient-13.0/isomorphic/system/helpers/fonts/MaterialIcons/material-icons.css&id=MonMar14202211:45:02GMT+0100(CentralEuropeanStandardTime)

Apart from the file being missing I'm not sure if the timestamp for the cache breaker is wanted like this.

Also, can you explain what the idea/feature here is?

Thank you & Best regards
Blama

[Isomorphic]

In terms of the feature, 13.0 has internal support for using icons from fonts, via src-strings prefixed "font:" and containing key-value pairs of settings - for example, "font:cssClass:material-icons;value:autorenew;" will show the refresh-type icon from Google's material-icons icon-font.

The CSS file in question sets up some styles for easy framework usage of that icon-font. We're looking into why it's missing and will update here when we have it fixed.

[Isomorphic]

The CSS file issue has been addressed - it was an issue with the generated URI - you can try it out in tomorrow's builds.

[Blama]

Hi Isomorphic,

13.0 has internal support for using icons from fonts, via src-strings prefixed "font:" and containing key-value pairs of settings - for example, "font:cssClass:material-icons;value:autorenew;" will show the refresh-type icon from Google's material-icons icon-font.

Thanks! Could you demonstrate how to use this in more FormItems in the first samples in this group (v13.0p_2022-03-15)?
I don't think there is a sample showing this already(?).

Best regards
Blama

[Isomorphic]

The mechanism isn't public, so it isn't doc'd or in samples. It's also incomplete - but it's pretty incorporative and you could push for it, if you like :)

You can try it out in 13.0 - go to one of the grid samples, right click a grid-header and note the icons - open the browser console and run isc.Media.useMedia("materialIcons") - open the grid's header-menu again to see the new icons.

[Blama]

Hi Isomorphic,

thanks. I can see how and that it is working.
Right now, I'm using FontAwesome for TextItems like this:

public TextItemFormItemIcon(FormItemIconType formItemIconType, String textColor) {
        super();

        setName(formItemIconType.getName());
        setSrc("blank");
        setInline(true);
        setTabIndex(-1);

        if (textColor == null || "black".equals(textColor))
            setText(formItemIconType.getCharacter());
        else
            setText("<span style=\"color: " + textColor + ";\">" + formItemIconType.getCharacter() + "</span>");
        setBaseStyle(formItemIconType.getCssClass());
    }

This then could be reduced to a single setSrc()?

It's not important for me, but better support for icon fonts definitely is a good and modern thing.

Best regards
Blama

[claudiobosticco]

The mechanism isn't public, so it isn't doc'd or in samples. It's also incomplete - but it's pretty incorporative and you could push for it, if you like :)

You can try it out in 13.0 - go to one of the grid samples, right click a grid-header and note the icons - open the browser console and run isc.Media.useMedia("materialIcons") - open the grid's header-menu again to see the new icons.

really nice!

[Isomorphic]

hi Blama

We haven't directly tried FontAwesome but yes, that's the idea, assuming the style you're applying loads and sets up the font you want to use. You can pass cssClass and your character as "value" in the src-string - and color and size as well, if you want to affect those things each time.

[Blama]

Hi Isomorphic,

I assume that would also apply to Img, ImgButton, etc, correct? Basically everywhere where one used png/svg images before?
That would be a great addition, especially if it also supports color changes (e.g. on hover with a src change), because that would made customizing colors according to customer requests much more easy.

Best regards
Blama

[Isomorphic]

Yes, anywhere you can use an SCImgURL - as for colors, our implementation applies them to the *Over and *Disabled styles, so you can set defaults up-front - but you can always pass color, so yes, you could technically just show the same icon in a different color for states.

[Blama]

Hi Isomorphic,

that is a cool feature IMHO. Would be great if it made it into the documentation as well.

Best regards
Blama

[Blama]

The CSS file issue has been addressed - it was an issue with the generated URI - you can try it out in tomorrow's builds.

Hi Isomorphic,

there are now a few other HTTP 404 for font files that you seem to try to load from different URLs (v13.0p_2022-08-29).

Best regards
Blama

[Isomorphic]

hi Blama ,

We aren't seeing any 404s at that link. Can you clarify whether there are additional steps to reproduce?

thanks

Isomorphic Support

[Blama]

Hi Isomorphic,

yes, just opening the link. Revisiting it seems that this only happens with Firefox (FF104/Win10). Chromium is OK.
Please see the attached Firefox screenshot.

Best regards
Blama

[Isomorphic]

Thanks for the clarification - the URL for those fonts has been corrected for builds dated August 31 and later.