🎨 Initiative: Switch to outlined icons

Summary

Outlined icons generally look more modern and are more versatile. With an outlined style, one can indicate selection using a filled variant.

With this change, it would also be ideal to start a switch from the now retired Material Icons to the visually similar, but newer Material Symbols.

All of our primary competitors use both outline-by-default and filled icons to indicate selection.

A move to Material Symbols is secondary, indication of selection is tertiary. Moving to a more modern, outlined style should be the primary goal.

Selection

When a navigation item is selected, its icon should change to a filled variant. This should ideally be done automatically in some way. We should ensure that this is consistent across all of our navigation components.

Material Symbols

Symbols are variable weight, so we should use one that matches Icons, at least for the time being, to aid the transition and so that the two styles can coexist until we've finished porting them. The default style is the most fitting: https://fonts.google.com/icons

Material Icons also provide outlined variants if a switch is deemed too difficult for the time being, but as Google has moved forward with Symbols, we will need to find a replacement to Icons eventually.

Exceptions

There are exceptions to this. One is app icons, the other is media types. This is out of recognizability and convention.

Additionally, don’t outline any icons that are already not filled like e.g. the "+" icon or checkmark. In doubt, check how the Material Symbol version looks: https://fonts.google.com/icons

There are exceptions to this. One is app icons, the other is media types. This is out of recognizability and convention.

another exception to consider: the + for new items

There are exceptions to this. One is app icons, the other is media types. This is out of recognizability and convention.

another exception to consider: the + for new items

Ouch haha. I updated the issue description :)

Sounds good

Should be easily doable by adding active as slot attribute.
Then all what is needed is:

<NcNavigationItem>
    <template #icon="{ active }">
        <NcIconSvgWrapper :path="active ? mdiFolder : mdiFolderOutlined" />
    </template>
</NcNavigationItem>

This is backwards compatible from the component and probably ~5 lines of code.

Yes, I know that for files this will need a change of the View API but for other apps this is really easy to change.
For files we maybe should make the iconSvg property a callback which gets the active state passed and thus can return an SVG based on that. This would be backwards compatible with existing views.

Yes, I know that for files this will need a change of the View API but for other apps this is really easy to change.

There's other places where it is complicated other than Files :)
Anything that is backed by an API basically (settings, apps...)

Anything that is backed by an API basically (settings, apps...)

Apps are fine, this is fully done on front end. But yes for API based icons this does not work that easy and needs some translation (settings and activity).

Meaning we can provide this from the components, but apps need some more time than the time left until next week (feature freeze) to adjust.

@kra-mo

Another possible exception seems to be the expand arrow in Collectives. Either it should stay filled, or change to a chevron (2 lines only). @kra-mo @marcoambrosini ?

I think that the chevron would look best, it's also consistent with what we do elsewhere

In the sharing sidebar the arrows are also inconsistent (2 different styles for 3 different places: dropdowns, action menus, expandable list entries):

@kra-mo

We can consider this done now – any place where an icon is still filled can be considered a bug and filed separately.
Great work everyone and really nice suggestion @kra-mo! ✨

Navigation Menu

Repository navigation

🎨 Initiative: Switch to outlined icons #53701

Summary

Selection

Material Symbols

Exceptions

41 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

🎨 Initiative: Switch to outlined icons #53701

Description

Summary

Selection

Material Symbols

Exceptions

Activity

ChristophWurst commented on Jun 26, 2025

kra-mo commented on Jun 26, 2025

41 remaining items

ChristophWurst commented on Aug 11, 2025

susnux commented on Aug 11, 2025

skjnldsv commented on Aug 11, 2025

susnux commented on Aug 11, 2025

jancborchardt commented on Sep 1, 2025

marcoambrosini commented on Sep 1, 2025

jancborchardt commented on Sep 2, 2025

jancborchardt commented on Sep 10, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions