[OPEN] [#1864] [7.2.0] Spotless theme Icons updates

[bbros]

Hello!
I tried to use the "light" icon of the material design font and I realized that there are not all the icons available online at this address https://fonts.google.com/icons?selected=Material+Icons

is it possible to update the font that uses the spotless theme?
it seems to me that it is being used as a local resource, but I'm not even sure about it.

In a old thread you did refer to font awesome as well, but I don't think that is included in spotless theme as x-fa css, or the implementation is not the same as x-md.
Am I wrong?

Thank you!

[fabricio.murta]

Hello @bbros!

The message you linked mentioned font awesome was in newer themes, but I only had in mind Sencha themes, not Ext.NET's Spotless one. In fact, even the shipped Material theme has the font awesome available.

As for the missing icons from material design theme, it seems we need to update the icon in the Spotless theme. But regardless of that you can always install the icon font as a separate resource like like one can do with font awesome and enjoy its latest version.

There's not really much complexity regarding custom icon sets (or updated, existing ones). You install de package, reference the CSS selector for a given icon, and that's it.

We have logged issue #1864 to track the state of Material Design icons in Ext.NET 7 and will post a follow-up here as soon as it gets included to the next release of Ext.NET.

Hope this helps!

[bbros]

I got a workaround downloading the new font and creating woff files.
adding those fonts to my project I'able to override the source path.

.x-md {
    font-family: 'BBros Material Icons' !important;
}

@font-face {
    font-family: BBros Material Icons;
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../font/MaterialIcons-Regular.ttf);
    src: local("BBros Material Icons"),local("MaterialIcons-Regular"),url(../font/MaterialIcons-Regular.woff2) format("woff2"),url(../font/material-icons/MaterialIcons-Regular.woff) format("woff"),url(../font/MaterialIcons-Regular.ttf) format("truetype")
}

I don't like it much but it works.
I posted here this workaround in case it helps someone else.

Thank you!

[fabricio.murta]

Hello again, @bbros! And thanks for the follow-up and solution that worked best for you!

In a old thread you did refer to font awesome as well, but I don't think that is included in spotless theme as x-fa css, or the implementation is not the same as x-md.

As I mentioned in our last post, I didn't specifically say that Spotless had Font Awesome icons built in. Turns out it has, I simply referenced the icon in a component and voila. It worked even if I didn't specify font awesome in code behind but then dynamically assigned it to a rendered component.

What might have confused you is the syntax for both icon sets. The implementation may not be the same, but if I recall well, font awesome kept its "shape" from previous versions. Here's a small sample using icons from both sets in the same page:

<ext-button text="Material icon" hidden="false" iconCls="x-md md-icon-home" />
<ext-button text="Awesome icon" hidden="false" iconCls="x-fa fa-home" />

adding those fonts to my project I'able to override the source path.

I would recommend using your own CSS space instead of overriding Ext.NET's, just to be in the safe -- and still be able to reference an icon that could possibly change to the worse, or be completely removed.

Hope this helps, and thanks again for the feedback, we really appreciate it!