Merge branch '34027-add-icons-to-sidebar' into 'master'

Add icons to project sidebar

Closes #34027 and #35877

See merge request !13204

app/assets/stylesheets/new_sidebar.scss

@@ -143,10 +143,19 @@ $new-sidebar-width: 220px;
     white-space: nowrap;
 
     a {
-      display: block;
+      display: flex;
+      align-items: center;
       padding: 12px 16px;
       color: $inactive-color;
     }
+
+    svg {
+      fill: $inactive-color;
+    }
+  }
+
+  .nav-item-name {
+    flex: 1;
   }
 
   li.active {
@@ -156,11 +165,25 @@ $new-sidebar-width: 220px;
       color: $active-color;
       font-weight: 700;
     }
+
+    svg {
+      fill: $active-color;
+    }
   }
 
   @media (max-width: $screen-xs-max) {
     left: (-$new-sidebar-width);
   }
+
+  .nav-icon-container {
+    display: flex;
+    margin-right: 8px;
+
+    svg {
+      height: 16px;
+      width: 16px;
+    }
+  }
 }
 
 .with-performance-bar .nav-sidebar {
@@ -173,7 +196,7 @@ $new-sidebar-width: 220px;
 
   > li {
     a {
-      padding: 8px 16px 8px 24px;
+      padding: 8px 16px 8px 50px;
 
       &:hover,
       &:focus {
@@ -198,7 +221,6 @@ $new-sidebar-width: 220px;
 .sidebar-top-level-items {
   > li {
     .badge {
-      float: right;
       background-color: $inactive-badge-background;
       color: $inactive-color;
     }
@@ -220,6 +242,10 @@ $new-sidebar-width: 220px;
       background-color: $hover-background;
       color: $hover-color;
 
+      svg {
+        fill: $hover-color;
+      }
+
       .badge {
         background-color: $indigo-500;
         color: $hover-color;

app/views/layouts/nav/_new_admin_sidebar.html.haml

@@ -10,7 +10,9 @@
   %ul.sidebar-top-level-items
     = nav_link(controller: %w(dashboard admin projects users groups jobs runners cohorts), html_options: {class: 'home'}) do
       = link_to admin_root_path, title: 'Overview', class: 'shortcuts-tree' do
-        %span
+        .nav-icon-container
+          = custom_icon('overview')
+        %span.nav-item-name
           Overview
 
       %ul.sidebar-sub-level-items
@@ -45,7 +47,9 @@
 
     = nav_link(controller: %w(conversational_development_index system_info background_jobs logs health_check requests_profiles)) do
       = link_to admin_conversational_development_index_path, title: 'Monitoring' do
-        %span
+        .nav-icon-container
+          = custom_icon('monitoring')
+        %span.nav-item-name
           Monitoring
 
       %ul.sidebar-sub-level-items
@@ -76,52 +80,72 @@
 
     = nav_link(controller: :broadcast_messages) do
       = link_to admin_broadcast_messages_path, title: 'Messages' do
-        %span
+        .nav-icon-container
+          = custom_icon('messages')
+        %span.nav-item-name
           Messages
     = nav_link(controller: [:hooks, :hook_logs]) do
       = link_to admin_hooks_path, title: 'Hooks' do
-        %span
+        .nav-icon-container
+          = custom_icon('system_hooks')
+        %span.nav-item-name
           System Hooks
 
     = nav_link(controller: :applications) do
       = link_to admin_applications_path, title: 'Applications' do
-        %span
+        .nav-icon-container
+          = custom_icon('applications')
+        %span.nav-item-name
           Applications
 
     = nav_link(controller: :abuse_reports) do
       = link_to admin_abuse_reports_path, title: "Abuse Reports" do
-        %span
-          %span.badge.count= number_with_delimiter(AbuseReport.count(:all))
+        .nav-icon-container
+          = custom_icon('abuse_reports')
+        %span.nav-item-name
           Abuse Reports
+        %span.badge.count= number_with_delimiter(AbuseReport.count(:all))
 
     - if akismet_enabled?
       = nav_link(controller: :spam_logs) do
         = link_to admin_spam_logs_path, title: "Spam Logs" do
-          %span
+          .nav-icon-container
+            = custom_icon('mr_bold')
+          %span.nav-item-name
             Spam Logs
 
     = nav_link(controller: :deploy_keys) do
       = link_to admin_deploy_keys_path, title: 'Deploy Keys' do
-        %span
+        .nav-icon-container
+          = custom_icon('key')
+        %span.nav-item-name
           Deploy Keys
 
     = nav_link(controller: :services) do
       = link_to admin_application_settings_services_path, title: 'Service Templates' do
-        %span
+        .nav-icon-container
+          = custom_icon('service_templates')
+        %span.nav-item-name
           Service Templates
 
     = nav_link(controller: :labels) do
       = link_to admin_labels_path, title: 'Labels' do
-        %span
+        .nav-icon-container
+          = custom_icon('labels')
+        %span.nav-item-name
           Labels
 
     = nav_link(controller: :appearances) do
       = link_to admin_appearances_path, title: 'Appearances' do
-        %span
+        .nav-icon-container
+          = custom_icon('appearance')
+        %span.nav-item-name
           Appearance
 
     %li.divider
     = nav_link(controller: :application_settings) do
       = link_to admin_application_settings_path, title: 'Settings' do
-        %span
+        .nav-icon-container
+          = custom_icon('settings')
+        %span.nav-item-name
           Settings

app/views/layouts/nav/_new_group_sidebar.html.haml

@@ -11,7 +11,9 @@
   %ul.sidebar-top-level-items
     = nav_link(path: ['groups#show', 'groups#activity', 'groups#subgroups'], html_options: { class: 'home' }) do
       = link_to group_path(@group), title: 'About group' do
-        %span
+        .nav-icon-container
+          = custom_icon('project')
+        %span.nav-item-name
           About
 
       %ul.sidebar-sub-level-items
@@ -27,10 +29,12 @@
 
     = nav_link(path: ['groups#issues', 'labels#index', 'milestones#index']) do
       = link_to issues_group_path(@group), title: 'Issues' do
-        %span
+        .nav-icon-container
+          = custom_icon('issues')
+        %span.nav-item-name
           - issues = IssuesFinder.new(current_user, group_id: @group.id, state: 'opened').execute
-          %span.badge.count= number_with_delimiter(issues.count)
           Issues
+        %span.badge.count= number_with_delimiter(issues.count)
 
       %ul.sidebar-sub-level-items
         = nav_link(path: 'groups#issues', html_options: { class: 'home' }) do
@@ -50,18 +54,24 @@
 
     = nav_link(path: 'groups#merge_requests') do
       = link_to merge_requests_group_path(@group), title: 'Merge Requests' do
-        %span
+        .nav-icon-container
+          = custom_icon('mr_bold')
+        %span.nav-item-name
           - merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id, state: 'opened', non_archived: true).execute
-          %span.badge.count= number_with_delimiter(merge_requests.count)
           Merge Requests
+        %span.badge.count= number_with_delimiter(merge_requests.count)
     = nav_link(path: 'group_members#index') do
       = link_to group_group_members_path(@group), title: 'Members' do
-        %span
+        .nav-icon-container
+          = custom_icon('members')
+        %span.nav-item-name
           Members
     - if current_user && can?(current_user, :admin_group, @group)
       = nav_link(path: %w[groups#projects groups#edit ci_cd#show]) do
         = link_to edit_group_path(@group), title: 'Settings' do
-          %span
+          .nav-icon-container
+            = custom_icon('settings')
+          %span.nav-item-name
             Settings
         %ul.sidebar-sub-level-items
           = nav_link(path: 'groups#edit') do

app/views/layouts/nav/_new_profile_sidebar.html.haml

@@ -10,52 +10,76 @@
   %ul.sidebar-top-level-items
     = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
       = link_to profile_path, title: 'Profile Settings' do
-        %span
+        .nav-icon-container
+          = custom_icon('profile')
+        %span.nav-item-name
           Profile
     = nav_link(controller: [:accounts, :two_factor_auths]) do
       = link_to profile_account_path, title: 'Account' do
-        %span
+        .nav-icon-container
+          = custom_icon('account')
+        %span.nav-item-name
           Account
     - if current_application_settings.user_oauth_applications?
       = nav_link(controller: 'oauth/applications') do
         = link_to applications_profile_path, title: 'Applications' do
-          %span
+          .nav-icon-container
+            = custom_icon('applications')
+          %span.nav-item-name
             Applications
     = nav_link(controller: :chat_names) do
       = link_to profile_chat_names_path, title: 'Chat' do
-        %span
+        .nav-icon-container
+          = custom_icon('chat')
+        %span.nav-item-name
           Chat
     = nav_link(controller: :personal_access_tokens) do
       = link_to profile_personal_access_tokens_path, title: 'Access Tokens' do
-        %span
+        .nav-icon-container
+          = custom_icon('access_tokens')
+        %span.nav-item-name
           Access Tokens
     = nav_link(controller: :emails) do
       = link_to profile_emails_path, title: 'Emails' do
-        %span
+        .nav-icon-container
+          = custom_icon('emails')
+        %span.nav-item-name
           Emails
     - unless current_user.ldap_user?
       = nav_link(controller: :passwords) do
         = link_to edit_profile_password_path, title: 'Password' do
-          %span
+          .nav-icon-container
+            = custom_icon('lock')
+          %span.nav-item-name
             Password
     = nav_link(controller: :notifications) do
       = link_to profile_notifications_path, title: 'Notifications' do
-        %span
+        .nav-icon-container
+          = custom_icon('notifications')
+        %span.nav-item-name
           Notifications
 
     = nav_link(controller: :keys) do
       = link_to profile_keys_path, title: 'SSH Keys' do
-        %span
+        .nav-icon-container
+          = custom_icon('key')
+        %span.nav-item-name
           SSH Keys
     = nav_link(controller: :gpg_keys) do
       = link_to profile_gpg_keys_path, title: 'GPG Keys' do
-        %span
+        .nav-icon-container
+          = custom_icon('key_2')
+        %span.nav-item-name
           GPG Keys
     = nav_link(controller: :preferences) do
       = link_to profile_preferences_path, title: 'Preferences' do
-        %span
+        .nav-icon-container
+          = custom_icon('preferences')
+        %span.nav-item-name
           Preferences
     = nav_link(path: 'profiles#audit_log') do
       = link_to audit_log_profile_path, title: 'Authentication log' do
-        %span
+        .nav-icon-container
+          = custom_icon('authentication_log')
+        %span.nav-item-name
           Authentication log

app/views/layouts/nav/_new_project_sidebar.html.haml

@@ -12,7 +12,9 @@
   %ul.sidebar-top-level-items
     = nav_link(path: ['projects#show', 'projects#activity', 'cycle_analytics#show'], html_options: { class: 'home' }) do
       = link_to project_path(@project), title: 'About project', class: 'shortcuts-project' do
-        %span
+        .nav-icon-container
+          = custom_icon('project')
+        %span.nav-item-name
           About
 
       %ul.sidebar-sub-level-items
@@ -32,7 +34,9 @@
     - if project_nav_tab? :files
       = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file commit commits compare projects/repositories tags branches releases graphs network)) do
         = link_to project_tree_path(@project), title: 'Repository',  class: 'shortcuts-tree' do
-          %span
+          .nav-icon-container
+            = custom_icon('doc_text')
+          %span.nav-item-name
             Repository
 
         %ul.sidebar-sub-level-items
@@ -71,16 +75,20 @@
     - if project_nav_tab? :container_registry
       = nav_link(controller: %w[projects/registry/repositories]) do
         = link_to project_container_registry_index_path(@project), title: 'Container Registry', class: 'shortcuts-container-registry' do
-          %span
+          .nav-icon-container
+            = custom_icon('mr_bold')
+          %span.nav-item-name
             Registry
 
     - if project_nav_tab? :issues
       = nav_link(controller: @project.issues_enabled? ? [:issues, :labels, :milestones, :boards] : :issues) do
         = link_to project_issues_path(@project), title: 'Issues', class: 'shortcuts-issues' do
-          %span
+          .nav-icon-container
+            = custom_icon('issues')
+          %span.nav-item-name
+            Issues
           - if @project.issues_enabled?
             %span.badge.count.issue_counter= number_with_delimiter(IssuesFinder.new(current_user, project_id: @project.id).execute.opened.count)
-            Issues
 
         %ul.sidebar-sub-level-items
           - if project_nav_tab?(:issues) && !current_controller?(:merge_requests)
@@ -115,14 +123,18 @@
     - if project_nav_tab? :merge_requests
       = nav_link(controller: @project.issues_enabled? ? :merge_requests : [:merge_requests, :labels, :milestones]) do
         = link_to project_merge_requests_path(@project), title: 'Merge Requests', class: 'shortcuts-merge_requests' do
-          %span
-            %span.badge.count.merge_counter.js-merge-counter= number_with_delimiter(MergeRequestsFinder.new(current_user, project_id: @project.id).execute.opened.count)
+          .nav-icon-container
+            = custom_icon('mr_bold')
+          %span.nav-item-name
             Merge Requests
+          %span.badge.count.merge_counter.js-merge-counter= number_with_delimiter(MergeRequestsFinder.new(current_user, project_id: @project.id).execute.opened.count)
 
     - if project_nav_tab? :pipelines
       = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :environments, :artifacts]) do
         = link_to project_pipelines_path(@project), title: 'Pipelines', class: 'shortcuts-pipelines' do
-          %span
+          .nav-icon-container
+            = custom_icon('pipeline')
+          %span.nav-item-name
             Pipelines
 
         %ul.sidebar-sub-level-items
@@ -159,19 +171,25 @@
     - if project_nav_tab? :wiki
       = nav_link(controller: :wikis) do
         = link_to get_project_wiki_path(@project), title: 'Wiki', class: 'shortcuts-wiki' do
-          %span
+          .nav-icon-container
+            = custom_icon('wiki')
+          %span.nav-item-name
             Wiki
 
     - if project_nav_tab? :snippets
       = nav_link(controller: :snippets) do
         = link_to project_snippets_path(@project), title: 'Snippets', class: 'shortcuts-snippets' do
-          %span
+          .nav-icon-container
+            = custom_icon('snippets')
+          %span.nav-item-name
             Snippets
 
     - if project_nav_tab? :settings
       = nav_link(path: %w[projects#edit project_members#index integrations#show services#edit repository#show ci_cd#show pages#show]) do
         = link_to edit_project_path(@project), title: 'Settings', class: 'shortcuts-tree' do
-          %span
+          .nav-icon-container
+            = custom_icon('settings')
+          %span.nav-item-name
             Settings
 
         %ul.sidebar-sub-level-items
@@ -207,9 +225,11 @@
 
     - else
       = nav_link(path: %w[members#show]) do
-        = link_to project_settings_members_path(@project), title: 'Settings', class: 'shortcuts-tree' do
+        = link_to project_settings_members_path(@project), title: 'Members', class: 'shortcuts-tree' do
+          .nav-icon-container
+            = custom_icon('members')
           %span
-            Settings
+            Members
 
     -# Shortcut to Project > Activity
     %li.hidden

app/views/shared/icons/_abuse_reports.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-2A6 6 0 1 0 8 2a6 6 0 0 0 0 12zm-2.163-3.275a2.499 2.499 0 0 1 4.343.03.5.5 0 0 1-.871.49 1.5 1.5 0 0 0-2.607-.018.5.5 0 1 1-.865-.502zM5 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>

app/views/shared/icons/_access_tokens.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16"><path d="m13 2h-10c-1.7 0-3 1.3-3 3v6c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-6c0-1.7-1.3-3-3-3m1 9c0 .6-.4 1-1 1h-10c-.6 0-1-.4-1-1v-6c0-.6.4-1 1-1h10c.6 0 1 .4 1 1v6"/><circle cx="4" cy="8" r="1"/><circle cx="8" cy="8" r="1"/><circle cx="12" cy="8" r="1"/></svg>

app/views/shared/icons/_account.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16"><path d="m6.8 8c-.3 0-.5 0-.8 0-5 0-6 2.7-6 4.5s.1 2.5 6 2.5c.6 0 1.1 0 1.5 0-1-1.1-1.5-2.5-1.5-4 0-1.1.3-2.1.8-3"/><circle cx="6" cy="4" r="3"/><path d="m15.9 11.5l-.9-.6c0-.3-.1-.7-.2-.9l.6-.9c.1-.1.1-.2 0-.3l-.4-.5c-.1-.1-.2-.1-.3-.1l-.9.4c-.3-.2-.5-.3-.9-.4l-.3-1c0-.1-.1-.2-.2-.2h-.6c-.1 0-.2.1-.2.2l-.3 1c-.3.1-.6.2-.9.4l-1.1-.4c-.1 0-.2 0-.3.1l-.4.5c0 .1 0 .2 0 .3l.6.9c-.1.3-.2.6-.2.9l-.9.5c-.1.1-.1.2-.1.3l.1.6c0 .1.1.2.2.2l1.1.1c.1.2.3.4.5.6l-.2 1.2c0 .1 0 .2.1.3l.6.3c.1 0 .2 0 .3-.1l.9-.9c.2 0 .4 0 .6 0l.9.9c.1.1.2.1.3 0l.6-.3c.1 0 .2-.2.1-.3l-.1-1.1c.2-.2.4-.4.5-.6l1.1-.1c.1 0 .2-.1.2-.2l.1-.6c.1-.1.1-.2 0-.2m-3.9.5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1"/></svg>

app/views/shared/icons/_appearance.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M11.161 12.456l.232.121c.1.053.175.094.249.137.53.318.844.75.857 1.402.012 1.397-1.116 1.756-3.12 1.858-.411.022-.744.026-1.38.026A8 8 0 0 1 0 8a8 8 0 0 1 8-8c4.417 0 7.998 3.582 7.998 7.977.06 2.621-1.312 3.586-4.48 3.648-.602.008-1.068.043-1.4.104.228.192.598.47 1.043.727zm-3.287-.943c-.019-1.495 1.228-1.856 3.611-1.888C13.67 9.582 14.028 9.33 13.998 8A6 6 0 1 0 8 14c.603 0 .91-.004 1.277-.023.172-.009.332-.02.478-.035-1.172-.738-1.868-1.47-1.88-2.43zM6 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 3a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-2-3a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM4 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>

app/views/shared/icons/_applications.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1 0h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm0 6h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm6-6h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm0 1v2h2V1H7zm0 5h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm6-6h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm0 6h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm0 1v2h2V7h-2zM1 12h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1zm0 1v2h2v-2H1zm6-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1zm6 0h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1z"/></svg>

app/views/shared/icons/_authentication_log.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M4 0h8a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm0 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4zm1 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0 3a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm3-5h3a1 1 0 0 1 0 2H8a1 1 0 1 1 0-2zm0 3h3a1 1 0 0 1 0 2H8a1 1 0 1 1 0-2zm-3 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm3-2h3a1 1 0 0 1 0 2H8a1 1 0 0 1 0-2z"/></svg>

app/views/shared/icons/_chat.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M5.414 12l-3.707 3.707C1.077 16.337 0 15.891 0 15V3a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5.414zM2 12.586l2.293-2.293A1 1 0 0 1 5 10h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v9.586z"/></svg>

app/views/shared/icons/_doc_text.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8 2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V7h-3a2 2 0 0 1-2-2V2zm2 .414V5h2.586L10 2.414zM5 0h4.586A2 2 0 0 1 11 .586L14.414 4A2 2 0 0 1 15 5.414V12a4 4 0 0 1-4 4H5a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm.5 11h5a.5.5 0 1 1 0 1h-5a.5.5 0 1 1 0-1zm0-2h5a.5.5 0 1 1 0 1h-5a.5.5 0 0 1 0-1zm0-2h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z"/></svg>

app/views/shared/icons/_emails.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M3 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H3zm0-2h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3z"/><path d="M3.212 4L8 8.31 12.788 4H3.212zm6.126 5.796a2 2 0 0 1-2.676 0L.183 3.965A3.001 3.001 0 0 1 3 2h10c1.293 0 2.395.818 2.817 1.965l-6.48 5.83z"/></svg>

app/views/shared/icons/_issues.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M10.458 15.012l.311.055a3 3 0 0 0 3.476-2.433l1.389-7.879A3 3 0 0 0 13.2 1.28L11.23.933a3.002 3.002 0 0 0-.824-.031c.364.59.58 1.28.593 2.02l1.854.328a1 1 0 0 1 .811 1.158l-1.389 7.879a1 1 0 0 1-1.158.81l-.118-.02a3.98 3.98 0 0 1-.541 1.935zM3 0h4a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm0 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3z"/></svg>

app/views/shared/icons/_issues.svg.erb

-<svg width="<%= size %>" height="<%= size %>" viewBox="0 0 16 16" class="gitlab-icon">
-  <path fill="#7E7C7C" d="M8,0 C3.581,0 0,3.581 0,8 C0,12.419 3.581,16 8,16 C12.419,16 16,12.419 16,8 C16,3.581 12.419,0 8,0 M8,2 C11.308,2 14,4.692 14,8 C14,11.308 11.308,14 8,14 C4.692,14 2,11.308 2,8 C2,4.692 4.692,2 8,2"></path>
-  <path fill="#7E7C7C" d="M7.1597,4 L8.8887,4 L8.8887,8 L7.1107,8 L7.1597,4 Z M7.1597,9.6667 L8.8887,9.6667 L8.8887,11.4447 L7.1107,11.4447 L7.1597,9.6667 Z"></path>
-</svg>

app/views/shared/icons/_key.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M7.574 6.689a4.002 4.002 0 0 1 6.275-4.861 4 4 0 0 1-4.86 6.275l-2.21 2.21.706.707a1 1 0 0 1-1.414 1.415l-.707-.708-.707.708.707.707a1 1 0 0 1-1.414 1.414l-.707-.707a1 1 0 0 1-1.415-1.414l5.746-5.746zm2.033-.618a2 2 0 1 0 2.828-2.829 2 2 0 0 0-2.828 2.829z"/></svg>

app/views/shared/icons/_key_2.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M5.172 14.157l-.344.344-2.485.133a.462.462 0 0 1-.497-.503l.14-2.24a.599.599 0 0 1 .177-.382l5.155-5.155a4 4 0 1 1 2.828 2.828l-1.439 1.44-1.06-.354-.708.707.354 1.06-.707.708-1.06-.354-.708.707.354 1.06zm6.01-8.839a1 1 0 1 0 1.414-1.414 1 1 0 0 0-1.414 1.414z"/></svg>

app/views/shared/icons/_labels.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M9.424 2.254l2.08-.905a1 1 0 0 1 1.206.326l3.013 4.12a1 1 0 0 1 .16.849l-1.947 7.264a3 3 0 0 1-3.675 2.122l-.5-.135a3.999 3.999 0 0 0 1.082-1.782 1 1 0 0 0 1.16-.722l1.823-6.802-2.258-3.087-.687.299a2 2 0 0 0-.628-.88l-.829-.667z"/><path d="M.377 3.7L4.4.498a1 1 0 0 1 1.25.003L9.627 3.7a1 1 0 0 1 .373.78V13a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V4.482A1 1 0 0 1 .377 3.7zM2 13a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V4.958L5.02 2.561 2 4.964V13zm3-6a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>

app/views/shared/icons/_lock.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16"><path d="m8 9c-.6 0-1 .4-1 1v1c0 .6.4 1 1 1s1-.4 1-1v-1c0-.6-.4-1-1-1"/><path d="m12 5v-1c0-2.2-1.8-4-4-4s-4 1.8-4 4v1c-1.7 0-3 1.3-3 3v5c0 1.7 1.3 3 3 3h8c1.7 0 3-1.3 3-3v-5c0-1.7-1.3-3-3-3m-6-1c0-1.1.9-2 2-2s2 .9 2 2v1h-4v-1m7 9c0 .6-.4 1-1 1h-8c-.6 0-1-.4-1-1v-5c0-.6.4-1 1-1h8c.6 0 1 .4 1 1v5"/></svg>

app/views/shared/icons/_members.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M10.521 8.01C15.103 8.19 16 10.755 16 12.48c0 1.533-.056 2.29-3.808 2.475.609-.54.808-1.331.808-2.475 0-1.911-.804-3.503-2.479-4.47zm-1.67-1.228A3.987 3.987 0 0 0 9.976 4a3.987 3.987 0 0 0-1.125-2.782 3 3 0 1 1 0 5.563zM5.976 7a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM6 15c-5.924 0-6-.78-6-2.52S.964 8 6 8s6 2.692 6 4.48c0 1.788-.076 2.52-6 2.52z"/></svg>

app/views/shared/icons/_messages.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.588 8.942l1.173 5.862A1 1 0 0 1 8.78 16H7.22a1 1 0 0 1-.98-1.196l1.172-5.862a3.014 3.014 0 0 0 1.176 0zM8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM4.464 2.464L5.88 3.88a3 3 0 0 0 0 4.242L4.464 9.536a5 5 0 0 1 0-7.072zm7.072 7.072L10.12 8.12a3 3 0 0 0 0-4.242l1.415-1.415a5 5 0 0 1 0 7.072zM2.343.343l1.414 1.414a6 6 0 0 0 0 8.486l-1.414 1.414a8 8 0 0 1 0-11.314zm11.314 11.314l-1.414-1.414a6 6 0 0 0 0-8.486L13.657.343a8 8 0 0 1 0 11.314z"/></svg>

app/views/shared/icons/_monitoring.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M10 13v1h3a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2h3v-1H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-3zM3 2a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3zm5.723 6.416l-2.66-1.773-1.71 1.71a.5.5 0 1 1-.707-.707l2-2a.5.5 0 0 1 .631-.062l2.66 1.773 2.71-2.71a.5.5 0 0 1 .707.707l-3 3a.5.5 0 0 1-.631.062z"/></svg>

app/views/shared/icons/_notifications.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6 14H2.435a2 2 0 0 1-1.761-2.947c.962-1.788 1.521-3.065 1.68-3.832.322-1.566.947-5.501 4.65-6.134a1 1 0 1 1 1.994-.024c3.755.528 4.375 4.27 4.761 6.043.188.86.742 2.188 1.661 3.982A2 2 0 0 1 13.64 14H10a2 2 0 1 1-4 0zm5.805-6.468c-.325-1.492-.37-1.674-.61-2.288C10.6 3.716 9.742 3 8.07 3c-1.608 0-2.49.718-3.103 2.197-.28.676-.356.982-.654 2.428-.208 1.012-.827 2.424-1.877 4.375H13.64c-.993-1.937-1.6-3.396-1.835-4.468z"/></svg>

app/views/shared/icons/_overview.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M2 2v3h3V2H2zm0-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm9 2v3h3V2h-3zm0-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zM2 11v3h3v-3H2zm0-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2zm9 2v3h3v-3h-3zm0-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2z"/></svg>

app/views/shared/icons/_pipeline.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16"><path d="m8 0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8m0 14c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6"/><circle cx="12.5" cy="9.5" r=".5"/><circle cx="12.5" cy="6.5" r=".5"/><circle cx="10.5" cy="12.5" r=".5"/><circle cx="10.5" cy="3.5" r=".5"/><circle cx="5.5" cy="12.5" r=".5"/><circle cx="5.5" cy="3.5" r=".5"/><circle cx="3.5" cy="9.5" r=".5"/><circle cx="3.5" cy="6.5" r=".5"/><path d="m9 7.2c0 0 0-.1 0-.2v-1.9c0-.1 0-.1-.1-.2l-.8-.8c0 0-.1 0-.1 0l-.9.8c-.1.1-.1.1-.1.2v1.9c0 .1 0 .2 0 .2-.6.4-1 1-1 1.8 0 1.1.9 2 2 2s2-.9 2-2c0-.8-.4-1.4-1-1.8m-1 2.8c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1"/></svg>

app/views/shared/icons/_preferences.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M6 2h9a1 1 0 0 1 0 2H6a1 1 0 1 1-2 0V2a1 1 0 1 1 2 0zM3 2H1a1 1 0 1 0 0 2h2V2zm10 5h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0zm-3 0H1a1 1 0 1 0 0 2h9V7zm-5 5h10a1 1 0 0 1 0 2H5a1 1 0 0 1-2 0v-2a1 1 0 0 1 2 0zm-3 0H1a1 1 0 0 0 0 2h1v-2z" fill-rule="evenodd"/></svg>

app/views/shared/icons/_profile.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-2A6 6 0 1 0 8 2a6 6 0 0 0 0 12zm-4.274-3.404C4.412 9.709 5.694 9 8 9c2.313 0 3.595.7 4.28 1.586A4.997 4.997 0 0 1 8 13a4.997 4.997 0 0 1-4.274-2.404zM8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>

app/views/shared/icons/_project.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8.462 2.177l-.038.044a.505.505 0 0 0 .038-.044zm-.787 0a.5.5 0 0 0 .038.043l-.038-.043zM3.706 7h8.725L8.069 2.585 3.706 7zM7 13.369V12a1 1 0 0 1 2 0v1.369h3V9H4v4.369h3zM14 9v4.836c0 .833-.657 1.533-1.5 1.533h-9c-.843 0-1.5-.7-1.5-1.533V9h-.448a1.1 1.1 0 0 1-.783-1.873L6.934.887a1.5 1.5 0 0 1 2.269 0l6.165 6.24A1.1 1.1 0 0 1 14.585 9H14z"/></svg>

app/views/shared/icons/_project.svg.erb

-<svg width="<%= size %>" height="<%= size %>" viewBox="0 0 16 16">
-  <path d="M6,6 L12,6 L12,5 L6,5 L6,6 Z M6,8 L12,8 L12,7 L6,7 L6,8 Z M6,10 L12,10 L12,9 L6,9 L6,10 Z M6,12 L12,12 L12,11 L6,11 L6,12 Z M4,6 L5,6 L5,5 L4,5 L4,6 Z M4,8 L5,8 L5,7 L4,7 L4,8 Z M4,10 L5,10 L5,9 L4,9 L4,10 Z M4,12 L5,12 L5,11 L4,11 L4,12 Z M13,3 L10,3 L10,4 L6,4 L6,3 L3,3 L3,13 L13,13 L13,3 Z M2,14 L14,14 L14,2 L2,2 L2,14 Z M1,0 C0.448,0 0,0.448 0,1 L0,15 C0,15.552 0.448,16 1,16 L15,16 C15.552,16 16,15.552 16,15 L16,1 C16,0.448 15.552,0 15,0 L1,0 Z" fill="#7F7E7E" fill-rule="evenodd"></path>
-</svg>

app/views/shared/icons/_service_templates.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M3 0h10a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm0 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3zm.8 2h2.4a.8.8 0 0 1 .8.8v1.4a.8.8 0 0 1-.8.8H3.8a.8.8 0 0 1-.8-.8V4.8a.8.8 0 0 1 .8-.8zm4.7 0h4a.5.5 0 1 1 0 1h-4a.5.5 0 0 1 0-1zm0 2h4a.5.5 0 1 1 0 1h-4a.5.5 0 0 1 0-1zm-5 3h9a.5.5 0 1 1 0 1h-9a.5.5 0 0 1 0-1zm0 2h9a.5.5 0 1 1 0 1h-9a.5.5 0 1 1 0-1z"/></svg>

app/views/shared/icons/_settings.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.415 5.803L1.317 4.084A.5.5 0 0 1 1.35 3.5l.805-.994a.5.5 0 0 1 .564-.153l1.878.704a5.975 5.975 0 0 1 1.65-.797L6.885.342A.5.5 0 0 1 7.36 0h1.28a.5.5 0 0 1 .474.342l.639 1.918c.594.181 1.15.452 1.65.797l1.877-.704a.5.5 0 0 1 .565.153l.805.994a.5.5 0 0 1 .032.584l-1.097 1.719c.217.551.354 1.143.399 1.76l1.731 1.058a.5.5 0 0 1 .227.54l-.288 1.246a.5.5 0 0 1-.44.385l-2.008.19a6.026 6.026 0 0 1-1.142 1.431l.265 1.995a.5.5 0 0 1-.277.516l-1.15.56a.5.5 0 0 1-.576-.1l-1.424-1.452a6.047 6.047 0 0 1-1.804 0l-1.425 1.453a.5.5 0 0 1-.576.1l-1.15-.561a.5.5 0 0 1-.276-.516l.265-1.995a6.026 6.026 0 0 1-1.143-1.43l-2.008-.191a.5.5 0 0 1-.44-.385L.058 9.16a.5.5 0 0 1 .226-.539l1.732-1.058a5.968 5.968 0 0 1 .399-1.76zM8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg>

app/views/shared/icons/_snippets.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M10.67 9.31a3.001 3.001 0 0 1 2.062 5.546 3 3 0 0 1-3.771-4.559 1.007 1.007 0 0 1-.095-.137l-4.5-7.794a1 1 0 1 1 1.732-1l4.5 7.794c.028.05.052.1.071.15zm-3.283.35l-.289.5c-.028.05-.06.095-.095.137a3.001 3.001 0 0 1-3.77 4.56A3 3 0 0 1 5.294 9.31c.02-.051.043-.102.071-.15l.866-1.5 1.155 2zm2.31-4l-1.156-2 1.325-2.294a1 1 0 1 1 1.732 1L9.696 5.66zm-5.465 7.464a1 1 0 1 0 1-1.732 1 1 0 0 0-1 1.732zm7.5 0a1 1 0 1 0-1-1.732 1 1 0 0 0 1 1.732z"/></svg>

app/views/shared/icons/_system_hooks.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M10 3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1h4zm0 1H6v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V4zM7 8a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3v4a2 2 0 1 0 4 0h-.44a.3.3 0 0 1-.25-.466l1.44-2.16a.3.3 0 0 1 .5 0l1.44 2.16a.3.3 0 0 1-.25.466H15a4 4 0 0 1-7 2.646A4 4 0 0 1 1 12H.56a.3.3 0 0 1-.25-.466l1.44-2.16a.3.3 0 0 1 .5 0l1.44 2.16a.3.3 0 0 1-.25.466H3a2 2 0 1 0 4 0V8z"/></svg>

app/views/shared/icons/_wiki.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8 2H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1v4.191a.5.5 0 0 1-.724.447l-1.052-.526a.5.5 0 0 0-.448 0l-1.052.526A.5.5 0 0 1 8 6.191V2zM4 0h8a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3z"/></svg>

changelogs/unreleased/34027-add-icons-to-sidebar.yml

+---
+title: Add icons to contextual sidebars
+merge_request:
+author: