Nice idea. Added value to (a very small set of our) users is that it would make icons themable eg. when they use custom theme or the White Label plugin - also would save us from creating several icon sizes of the same icon (though we don't do this often).

Not doing this would mean either not using icons at all in redesigned parts or using existing icons which don't fit well in it.

we've redesigned Piwik twice before and it wasn't an issue to use image icons. for this redesign we can still use image icons like we do already consistently within Piwik... if/when icons don't fit well in new design, we should ask designers to create new icons. (that's not an issue at all)

The obvious solution IMO would be Bootstrap or even better, Font Awesome but it requires Bootstrap…

It's not that obvious: these sets don't have all icons we need... so we will need to design or improve those icon sets to create new icons. imho it's lots of extra work and out of scope for our Redesign project in #7585

these sets don't have all icons we need...

Could you please explain this?

I did a POC by searching for all Morpheus icons from A to I (~ half the page) and could find a replacement in Font Awesome every time. I have ignored non-icons (background fading strips), maybe 2-3 of them. Yes this folder doesn't contain all piwik icons, but 100% on that sample is a pretty good result.

And in any case, I don't suggest we remove existing icons (yet). As for new icons, in any case we would have to create new icons anyway (except if we have font icons we have a great chance to already have it, which saves us some time).

for this redesign we can still use image icons like we do already consistently within Piwik...

Some of those old icons are not consistent with the new design, that's the problem I initially said. I can use these but it won't look as good as the screens we have been sent.

if/when icons don't fit well in new design, we should ask designers to create new icons. (that's not an issue at all)

Using a standard lib is not an issue at all too. Especially when it comes with numerous advantages, and also it replaces deprecated practices with better ones which is good for Piwik on the long term (by deprecated I mean there is a better way).

imho it's lots of extra work

Could you please explain this?

these sets don't have all icons we need...

likely I under-estimated fontawesome. I took quick look and it seems very complete...

Using a standard lib is not an issue at all too.

If we're talking about http://fortawesome.github.io/Font-Awesome/icons/ in particular, then +1 to consider the idea seriously. This decision to use a given iconset is next for designers who are responsible to make Piwik look great. so maybe we ask them if they would consider using FontAwesome (for new icons and/or for existing ones)?

One consequence is that it would make Piwik "look like" many other apps which use this icon set (this may not be an issue considering the benefits and if designers find it looks good).

Some of those old icons are not consistent with the new design

Good point - if we don't use an icon set, we should at least design those old icons to look good with new themes. if we dont use fontawesome, then we should create a list of those "not good looking icons" and put them in a new issue and i'll follow up there with designers to get consistent icons designed.

+1 let's ask what they think of the idea so that we can have a different voice on this

For now I have not used icons: the main problem (beside whether it's "good looking" or not) is that they mess up the alignment, i.e. they are not aligned with the text, cause the alert to be much bigger and not have consistent margins, etc.. As you can see in the screenshots not using icons is not too much critical for a first version maybe? (i.e. this issue can be delayed a little if necessary?)

I reckon we're excluding icons that are returned in APIs? Like browser, OS, ... ? They are used eg in Piwik Mobile as well. They have to be images for the mobile app.

At some point it makes probably sense to switch to something like FontAwesome if designers are ok with it. Good point to involve them. I reckon we're not talking about whether it makes sense to use it or not but rather about the priority and importance of it compared to other opened issues? Used FontAwesome in past projects as well and it works (eg on developer.piwik.org). It definitely has advantages but the current version is maybe ok for now too (if there are no major changes in the UI anyway maybe)?

Would we have to create a font for icons that are not present there? Such as maybe http://demo.piwik.org/plugins/Live/images/visitorlog.png ? Might be important to let designers know they'd have to do that.

I reckon we'd also have to leave the old images there in case plugins use them? Also I think we do allow / support overwriting icons in themes meaning we probably have to list new/changed/removed icons in the changelog etc? Just a random thought, different topic!

For the example of the visitor log I don't think we need to find an exact match for new icons but instead think of what we want to show. The current visitor log icon is but we could use any user/profile kind of icon. We can also stack icons (and of course change colors), here is a quick and dirty example by stacking 2 icons:

about the priority and importance of it compared to other opened issues?

I don't think "using font icons" will ever be something of high importance, but I don't think it means we should dismiss it. We don't have anything particularly major going on, still "fixing issues & improving performance" as usual. If we don't do it during a redesign, then there's no better time. One other thing is that if we don't use font icons now then designers have to create image icons for the new icons of the redesigns + we have to integrate them (sometimes less easy than font icons) etc.

I reckon we're excluding icons that are returned in APIs? Like browser, OS, ... ? They are used eg in Piwik Mobile as well. They have to be images for the mobile app.

yes those browser/device/country flags/etc. icons are not included in the scope of using fontawesome. those would be at first only "Piwik app" icons

I reckon we'd also have to leave the old images there in case plugins use them?

+1

Next step for this RFC: we'll involve designers and should have more feedback in next few weeks 👍

For the record we are waiting on an Piwik icon set developed by designers.

Do you maybe know if there is any timeline for that icon set?

Can we update the DevicePlugins icons too? Currently they are all have a not transparent background and looks ugly in black tooltip in visitor log. I think better to create them in png format with transparent background.

@tsteur the timeline given by the designer team has long been passed :/ I'll send them another email

Cheers. Do you know if it will be a font? Are you waiting on it?

If we don't get it soon enough I'd say we just use an alternative. I reckon we won't often have such cases where we actually need a new icon after the initial icon pack. I hope it won't take more than 5 days or so to get new icons (not a whole pack) in the future, otherwise it might be better to just use an alternative

Yes it will be a font (and the package should also contain SVGs + generated PNGs), waiting for the font (apparently the icons are done). FYI the icon set is based on the icons made for piwik.org so the idea is to be consistent between the website and the app (which is a good idea in theory). I agree though that we should be ready to go with an alternative if it gets delayed more.

I don't know all the Less features but there's maybe a way to bulk-alias CSS classes. That way we could use another icon set (e.g. font awesome) and bulk-alias the CSS classes we want (e.g. icon-…) to the font-awesome classes (fa-…). Later we can change (or remove) the aliases to switch to another icon set. Anyway, might be possible, that way we are not locked.

Hope we'll get more information soon how long it will take. Otherwise just let's use something else

ping @lemu

Another alternative might be to use material design icons (750+) since we have some elements of material design already in our UI https://www.google.com/design/icons/ http://google.github.io/material-design-icons/

if there will be more delay, 👍 for the implementation of FontAwesome. It's very popular, has a consistent look and useful features (stacked icons, spin icons).
I use it in many web applications.

If another icon set (google material design ^) will be used, I prefer the usage of an icon font over oldschool images.

Just FYI: The material design icons are available as font as well

Hey, try our propositions first. Sorry for the delay, that was low priority for us and got pushed back.

https://www.dropbox.com/s/u5gqzz7dr460wju/%21Piwik%20Icon%20Set.zip?dl=0

Thank you @lemu for the icon set!

We will check it out and try to integrate it in Piwik for next release 2.15.0.

cc @mnapoli

Great! I'm looking forward to see them in one of the next versions.

@lemu thanks, a feedback: the icon names are rather redundant, e.g. icon-ico_maximise or even icon-ico_ico_edit. A simpler pattern like icon-edit might be better.

Also there are duplicate icons, I guess it's because it's a WIP version?

Can you get me a list of proposed changes, so we can go trough it?

In short drop the ico_ prefixes (i.e. use icon- as the only prefix). So for example icon-ico_maximise becomes icon-maximise. Is that what you asked about?

That's doable. Probably some setting in font generator.

What icon's did you found that are a duplicate?

Duplicated icons:

Also it would be great to be consistent on the naming, here are the naming patterns I've seen:

• underscores: icon-ico_datepicker_arr_r
• dash: icon-ico_open-source
• camelCase: icon-ico_ecommerceAbandonedCart

It would be good to use only the dash as separators, that would be consistent with most practices in HTML/CSS frameworks (e.g. Bootstrap).

PR: #8488

FYI: GitHub just moved from font icons to SVG and explained it here: https://github.com/blog/2112-delivering-octicons-with-svg