Change subgroups to use official `subgroup` icon

Instead of using the `group` icon

Changelog: changed

app/assets/javascripts/groups/components/item_stats.vue

@@ -55,7 +55,7 @@ export default {
       :title="__('Subgroups')"
       :value="item.subgroupCount"
       css-class="number-subgroups gl-ml-5"
-      icon-name="group"
+      icon-name="subgroup"
       data-testid="subgroups-count"
     />
     <item-stats-value

app/assets/javascripts/groups/components/item_type_icon.vue

@@ -15,7 +15,7 @@ export default {
   computed: {
     iconClass() {
       if (this.itemType === ITEM_TYPE.GROUP) {
-        return 'group';
+        return 'subgroup';
       }
       return 'project';
     },

lib/sidebars/groups/menus/group_information_menu.rb

@@ -20,7 +20,7 @@ module Sidebars
 
         override :sprite_icon
         def sprite_icon
-          'group'
+          context.group.subgroup? ? 'subgroup' : 'group'
         end
 
         override :active_routes

spec/frontend/groups/components/item_type_icon_spec.js

@@ -34,7 +34,7 @@ describe('ItemTypeIcon', () => {
 
     it.each`
       type                 | icon
-      ${ITEM_TYPE.GROUP}   | ${'group'}
+      ${ITEM_TYPE.GROUP}   | ${'subgroup'}
       ${ITEM_TYPE.PROJECT} | ${'project'}
     `('shows "$icon" icon when `itemType` is "$type"', ({ type, icon }) => {
       createComponent({

spec/lib/sidebars/groups/menus/group_information_menu_spec.rb

@@ -28,6 +28,20 @@ RSpec.describe Sidebars::Groups::Menus::GroupInformationMenu do
     end
   end
 
+  describe '#sprite_icon' do
+    subject { described_class.new(context).sprite_icon }
+
+    context 'when group is a root group' do
+      specify { is_expected.to eq 'group'}
+    end
+
+    context 'when group is a child group' do
+      let(:group) { build(:group, parent: root_group) }
+
+      specify { is_expected.to eq 'subgroup'}
+    end
+  end
+
   describe 'Menu Items' do
     subject { described_class.new(context).renderable_items.index { |e| e.item_id == item_id } }