Navigation - Add icons to contextual sidebar

Resources

FE @annabeldunstone

We add icons to the first level items in the sidebar. This helps with recognition and will allow us to make a collapsible sidebar in the future.

We should only make this change once we have our own icons in the app. We don't want to confuse users by starting out with Font Awesome icons and then changing them.

The icons we create need to be very clear. For example, the Issues icon is not very recognizable right now and it'll be a problem if our navigation relies on unclear icons.

Icon list

Admin area:

• Overview
• Monitoring
• Messages
• System Hooks
• Applications
• Abuse Reposts
• License EE only
• Push Rules EE only
• Geo Nodes EE only
• Deploy Keys
• Service Templates
• Labels
• Appearance
• Settings (reuse from project)

Overview	Monitoring	Messages	System Hooks	Applications	Abuse Reports	License	Push Rules	Geo Nodes

Deploy Keys	Service Templates	Labels	Appearance

User settings:

• Profile
• Account
• Applications
• Chat
• Access Tokens
• Emails
• Password
• Notifications
• SSH Keys
• Preferences
• Authentication log

Profile	Account	Applications	Chat	Access Tokens	Emails	Password	Notifications
		the icon in admin area				(from #33757 (moved))	(from #32959 (moved))

SSH Keys	Preferences	Authentication Log
the icon for deploy keys

Group:

• About (group)
• Issues (reuse from project)
• Merge Requests (reuse from project)
• Members
• Settings (reuse from project)

About(group)	Members
Same as project("House" icon)	(from #33757 (moved))

Project:

• About (project)
• Repository
• Issues
• Merge Requests
• Pipelines
• Wiki
• Snippets
• Members (new with https://gitlab.com/gitlab-org/gitlab-ce/issues/35138)
• Settings

Resources

Specs

contextual-sidebar-icons.zip

Meta issue #32794 (closed) - Global and Contextual Navigation