Nextcloud-vue: Switch to material-design icons

Created on 23 Apr 2020  路  10Comments  路  Source: nextcloud/nextcloud-vue

Icons:
https://material.io/resources/icons/?style=baseline
Icon font:
https://github.com/google/material-design-icons/tree/master/iconfont

Pros:

  • Design consistency;
  • Familiarity, people are very used to them;
  • Loads of them, for most use cases;
  • Almost no maintenance from our side once implemented;

Cons:

  • Some effort implementing them across nc;

cc @nextcloud/designers

1. to develop design discussion

Most helpful comment

Btw, it also still doesn't answer what we can do for shipping our own app icons.
Which might be great? Or maybe doesn't make sense at all :shrug:

Yup, see my comment as well :)

Is this really desirable? Aren't Nextcloud's icons kind of part of the design language? (not that I'd dislike the material icons or something; I'm just wondering about your (mostly @jancborchardt's) reasoning regarding this...)

Yes, some points:

  • Material Design is probably the guideline we follow closest, and also the icons are quite similar in its simplicity
  • We need to weigh the cost-benefit ratio, currently the icons are not really consistent even among themselves, and we are constantly lagging behind there. Not that it's a huge issue, but using a library has the potential to make this a lot easier.
  • As Marco said, using well-established icons has its benefits, as they are more universally understood than custom ones. (E.g. our fullscreen icon is not very common, we should have it with all 4 corners)

All 10 comments

Pretty much all for it, just some more considerations:

  • We need to make sure to find fitting icons for the existing ones we use
  • For transition, we either keep the existing ones as fallbacks for a few releases, or shim fitting Material icons for the icon- classes. Right?
  • What about the app icons themselves? Will they stay separate, or can we add them to the icon font? Because they at least should not be generic. (Also some of them are used in places where normally we use icons, like "Flow". It鈥檚 not like we can鈥檛 change that icon though, but just thinking. :)

Also fine from my side, I just would like to get some approval that the Apache license version 2.0 is compatible with our AGPL ;)

It should be as it's on the permissive side

I just would like to get some approval that the Apache license version 2.0 is compatible with our AGPL ;)

Yup it is :)

Btw, it also still doesn't answer what we can do for shipping our own app icons.
Which might be great? Or maybe doesn't make sense at all :shrug:

Is this really desirable? Aren't Nextcloud's icons kind of part of the design language? (not that I'd dislike the material icons or something; I'm just wondering about your (mostly @jancborchardt's) reasoning regarding this...)

Btw, it also still doesn't answer what we can do for shipping our own app icons.
Which might be great? Or maybe doesn't make sense at all :shrug:

Yup, see my comment as well :)

Is this really desirable? Aren't Nextcloud's icons kind of part of the design language? (not that I'd dislike the material icons or something; I'm just wondering about your (mostly @jancborchardt's) reasoning regarding this...)

Yes, some points:

  • Material Design is probably the guideline we follow closest, and also the icons are quite similar in its simplicity
  • We need to weigh the cost-benefit ratio, currently the icons are not really consistent even among themselves, and we are constantly lagging behind there. Not that it's a huge issue, but using a library has the potential to make this a lot easier.
  • As Marco said, using well-established icons has its benefits, as they are more universally understood than custom ones. (E.g. our fullscreen icon is not very common, we should have it with all 4 corners)

okay, thanks for the clarification @jancborchardt

ALso, we discussed creating our icon library for a while now, and in the end, it's probably easiest to outsource this to some external lib like we tried to do as much as we could so far :+1:

let's make ActionButton support them: https://github.com/nextcloud/nextcloud-vue/issues/1613

Was this page helpful?
0 / 5 - 0 ratings