Include icons font?

[johnd0e]

221 (besides other features) also includes fontawesome.

Pros: For plugins developers it's very convenient to have some icons out-of-the-box

Cons If we need only some icons, it is more efficient to embed only that icons.

So questions:

1. What is actual overhead of including whole font?
2. IITC-CE already contains (some) icons from https://materialdesignicons.com/. What set should we prefer?

[modos189]

We now have connected some material icons and can always expand their number. We can even integrate all the icons so that the plugin developers can use them when needed.

Since we use svg icons, it's no problem for us to add a new icon or remove unused ones. If we use fontawesome, we will need to rebuild the entire bundle with fontawesome.

SVG allows us to use multicolor icons, which are easier to position on page, and do not cause problems when you force the browser to specify the font used by the browser. In addition, icons as a font are text, so browsers can (depending on the browser) apply different antialiases.

[johnd0e]

What is important, imho

• icons should be available 'out-of-the-box', not 'on request'
• icons should be easy to use (fonts are easier here) Yeah, svg has own advantages, but who really cares?
• we should waste too much resources

About last point: I do not know yet how that fonts are implemented. When we include css - do all icons loaded immediately, or only when actually used? css itself is small, much smaller than set of svgs.

[inexcode]

Do all icons loaded immediately?

Font also has to be downloaded, with all icons.

In case with materialdesignicons.com, it's ~300 KB uncompressed with woff2, ~200 KB compressed from CDN. Old browsers would fall back to other formats, ~1 MB uncompressed.

[johnd0e]

Old browsers would fall back to other formats, ~1 MB uncompressed.

What exact browsers/versions do you mean?

[inexcode]

What exact browsers/versions do you mean?

https://caniuse.com/#feat=woff2

[johnd0e]

https://caniuse.com/#feat=woff2

Most important: Android 2.1 - 4.4.4 - not supported Well, I suppose those versions are almost gone.

[modos189]

I think, discussion should be divided into two questions:

1. Using svg or font material icons?

2. Connecting also fontawesome library?

[modos189]

Android 2.1 - 4.4.4 - not supported Well, I suppose those versions are almost gone.

0.6% of users IITC-Mobile

[AlfonsoML]

I think that the debate svg vs fonticons was settled long ago.
One benefit of fonticons is that in a single file you get all the icons,

Some downsides:

• you must include everything even if you don't need it, or you have to rebuild the font
• if you want another icon that it's not included in the font you are out of luck. In SVG you can pick icons from wherever you want and a designer can easily use their own icons.
• only one color
• in Safari, I think that Apple made it too easy to enable a privacy setting that disables the uses of webfonts, so those users will see garbage instead of icons.

[johnd0e]

May icon font be optional? So font's absence does not break layout.

[MysticJay]

That is how it is done already: ` var txtNew = '+'; var txtDel = 'X';

if(window.plugin.faIcon){
    txtNew = '<i class="fa fa-plus"></i>';
    txtDel = '<i class="fa fa-trash"></i>';
}`

[MysticJay]

* if you want another icon that it's not included in the font you are out of luck. In SVG you can pick icons from wherever you want and a designer can easily use their own icons.

And have a mixture with no common CI

* only one color

based on the color of the text. Do we need rainbow RGB Icons?

* in Safari, I think that Apple made it too easy to enable a privacy setting that disables the uses of webfonts, so those users will see garbage instead of icons.

That sounds like missing alternative

[AlfonsoML]

* if you want another icon that it's not included in the font you are out of luck. In SVG you can pick icons from wherever you want and a designer can easily use their own icons.

And have a mixture with no common CI

I don't understand the meaning of CI here. IITC isn't at the moment a piece of art and you have a mixture with all the plugins created by different developers. Even if you think that using a webfont is a good idea, that won't prevent that the rest of the world prefers SVG and use them in their plugins or if the iconset provided by the core doesn't include the one that they need and add it with a different style.

* only one color

based on the color of the text. Do we need rainbow RGB Icons?

Monochrome is boring. Even fontawesome thinks so https://fontawesome.com/icons?d=gallery&s=duotone With a webfont you can't choose to use more than one color. With SVG a designer can do whatever they need.

* in Safari, I think that Apple made it too easy to enable a privacy setting that disables the uses of webfonts, so those users will see garbage instead of icons.

That sounds like missing alternative Exactly, a webfont doesn't allow to provide alternative text when a font isn't loaded. They are not accessible.

[johnd0e]

https://css-tricks.com/icon-fonts-vs-svg/

[MysticJay]

A direct comparison:

With Font Awesome:

Without Font Awsome:

What would the code look like with SVG?

[MysticJay]

I created an issue in ZasoItems for a step-by-step re-design, that would lead into a SVG icon set and would allow a smooth transition of existing use of FontAwsome.

https://github.com/MysticJay/ZasoItems.CE/issues/5