From 28846e71c725bc1a1fbc4a90e68d21197191d0a4 Mon Sep 17 00:00:00 2001
From: Sara Arjona <sara@moodle.com>
Date: Tue, 10 Dec 2024 13:01:27 +0100
Subject: [PATCH] MDL-83933 theme: Update default icon width

While updating the custom icons for import/export, it was observed
that the default width for FontAwesome icons is 20px instead of
the previously assumed 16px.
This commit adjusts the default width accordingly and resolves several
styles where the width was incorrectly applied.
Additionally, the default icon color has been updated to ensure consistent
appearance across both SVG icons and FontAwesome icons.
---
 theme/boost/scss/moodle/blocks.scss  |  2 +-
 theme/boost/scss/moodle/buttons.scss |  8 +--
 theme/boost/scss/moodle/course.scss  |  6 +-
 theme/boost/scss/moodle/icons.scss   | 48 +++++++++-----
 theme/boost/scss/moodle/message.scss |  4 +-
 theme/boost/style/moodle.css         | 94 +++++++++++++++-------------
 theme/classic/style/moodle.css       | 94 +++++++++++++++-------------
 7 files changed, 140 insertions(+), 116 deletions(-)

diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss
index 2348ab4ae08..e6fb830979c 100644
--- a/theme/boost/scss/moodle/blocks.scss
+++ b/theme/boost/scss/moodle/blocks.scss
@@ -382,7 +382,7 @@ $blocks-plus-gutter: $blocks-column-width + ( $grid-gutter-width * 0.5 );
     .pluscontainer {
         border: $border-width solid $primary-light-border;
         border-radius: 50%;
-        width: map-get($iconsizes, 5);
+        width: map-get($iconwidthsizes, 5);
         height: map-get($iconsizes, 5);
     }
     &:hover {
diff --git a/theme/boost/scss/moodle/buttons.scss b/theme/boost/scss/moodle/buttons.scss
index bee6408acc0..9aac63e0045 100644
--- a/theme/boost/scss/moodle/buttons.scss
+++ b/theme/boost/scss/moodle/buttons.scss
@@ -39,10 +39,10 @@ p.arrow_button {
 }
 
 .btn.btn-icon {
-    height: ($icon-width + 20px);
+    height: ($icon-height + 20px);
     width: ($icon-width + 20px);
-    font-size: $icon-width;
-    line-height: $icon-width;
+    font-size: $icon-height;
+    line-height: $icon-height;
     padding: 0;
     border-radius: 50%;
     flex-shrink: 0;
@@ -55,7 +55,7 @@ p.arrow_button {
     @each $size, $length in $iconsizes {
         &.icon-size-#{$size} {
             height: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
-            width: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
+            width: (map-get($iconwidthsizes, $size) + 20px) !important; /* stylelint-disable-line declaration-no-important */
             font-size: $length !important; /* stylelint-disable-line declaration-no-important */
             line-height: $length !important; /* stylelint-disable-line declaration-no-important */
         }
diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
index 42f29695f03..d3b68d1f810 100644
--- a/theme/boost/scss/moodle/course.scss
+++ b/theme/boost/scss/moodle/course.scss
@@ -197,7 +197,7 @@ $divider-hover-color: $primary !default;
     .action-menu {
         .btn.btn-icon {
             height: map-get($iconsizes, 5);
-            width: map-get($iconsizes, 5);
+            width: map-get($iconwidthsizes, 5);
             @include border-radius();
         }
         &.section-actions .btn.btn-icon {
@@ -433,7 +433,7 @@ $divider-hover-color: $primary !default;
         justify-self: end;
         .groupmode-information {
             height: map-get($iconsizes, 5);
-            width: map-get($iconsizes, 5);
+            width: map-get($iconwidthsizes, 5);
             @include border-radius();
         }
         .groupmode-icon-info {
@@ -780,7 +780,7 @@ $divider-hover-color: $primary !default;
         }
         .icons-collapse-expand:has(+ h4) {
             height: map-get($iconsizes, 4);
-            width: map-get($iconsizes, 4);
+            width: map-get($iconwidthsizes, 4);
             font-size: $font-size-sm;
         }
         h4 {
diff --git a/theme/boost/scss/moodle/icons.scss b/theme/boost/scss/moodle/icons.scss
index 9524e56eb29..9afd52fd06f 100644
--- a/theme/boost/scss/moodle/icons.scss
+++ b/theme/boost/scss/moodle/icons.scss
@@ -2,21 +2,32 @@
 // Standardize the size, padding and alignment for all icons in Moodle.
 
 // Size of default icons.
-$icon-width: 16px;
+$icon-width: 20px;
 $icon-height: 16px;
 // Size of medium icons.
-$icon-medium-width: 32px;
+$icon-medium-width: 40px;
 $icon-medium-height: 32px;
 // Size of big icons.
-$icon-big-width: 64px;
+$icon-big-width: 80px;
 $icon-big-height: 64px;
 // Size of icon boxes.
-$icon-box-width: 48px;
+$icon-box-width: 60px;
 $icon-box-height: 48px;
 
 // stylelint-disable
 $iconsizes: () !default;
 $iconsizes: map-merge((
+  0: 0,
+  1: ($icon-height * .25),
+  2: ($icon-height * .5),
+  3: $icon-height,
+  4: ($icon-height * 1.5),
+  5: ($icon-height * 2),
+  6: ($icon-height * 2.5),
+  7: ($icon-height * 3)
+), $iconsizes);
+$iconwidthsizes: () !default;
+$iconwidthsizes: map-merge((
   0: 0,
   1: ($icon-width * .25),
   2: ($icon-width * .5),
@@ -25,7 +36,8 @@ $iconsizes: map-merge((
   5: ($icon-width * 2),
   6: ($icon-width * 2.5),
   7: ($icon-width * 3)
-), $iconsizes);
+), $iconwidthsizes);
+
 // stylelint-enable
 
 // This mixin change an icon color using filters.
@@ -56,8 +68,12 @@ $iconsizes: map-merge((
     filter: url($svg-url);
 }
 
+a i.icon {
+    color: $body-color;
+}
+
 .icon {
-    max-width: map-get($iconsizes, 4);
+    max-width: map-get($iconwidthsizes, 4);
     max-height: map-get($iconsizes, 4);
     margin: 0;
     padding: 0;
@@ -85,14 +101,14 @@ $iconsizes: map-merge((
     }
 
     &.emoticon {
-        max-width: map-get($iconsizes, 3);
+        max-width: map-get($iconwidthsizes, 3);
         max-height: map-get($iconsizes, 3);
     }
 }
 
 // Force size for the SVG icons.
 img.icon {
-    width: 16px;
+    width: 20px;
     height: 16px;
 }
 
@@ -144,7 +160,7 @@ img.icon {
     .icon-size-#{$size} {
         .icon {
             height: $length !important; /* stylelint-disable-line declaration-no-important */
-            width: $length !important; /* stylelint-disable-line declaration-no-important */
+            width: map-get($iconwidthsizes, $size) !important; /* stylelint-disable-line declaration-no-important */
             font-size: $length !important; /* stylelint-disable-line declaration-no-important */
         }
     }
@@ -191,11 +207,11 @@ img.icon {
     .activityicon,
     .icon {
         margin: 0;
-        font-size: $icon-medium-width;
-        height: $icon-medium-width;
-        width: $icon-medium-height;
-        max-height: $icon-medium-width;
-        max-width: $icon-medium-height;
+        font-size: $icon-medium-height;
+        height: $icon-medium-height;
+        width: $icon-medium-width;
+        max-height: $icon-medium-height;
+        max-width: $icon-medium-width;
     }
     &.small {
         width: $activity-iconcontainer-width - 10px;
@@ -205,9 +221,9 @@ img.icon {
     }
     &.smaller {
         width: $activity-iconcontainer-width - 20px;
-        height: $activity-iconcontainer-width - 20px;
+        height: $activity-iconcontainer-height - 20px;
         max-width: $activity-iconcontainer-width - 20px;
-        max-height: $activity-iconcontainer-width - 20px;
+        max-height: $activity-iconcontainer-height - 20px;
         .activityicon {
             width: $icon-medium-width;
             height: $icon-medium-height;
diff --git a/theme/boost/scss/moodle/message.scss b/theme/boost/scss/moodle/message.scss
index b30e2ab6791..691469711c7 100644
--- a/theme/boost/scss/moodle/message.scss
+++ b/theme/boost/scss/moodle/message.scss
@@ -499,7 +499,7 @@ $message-day-color: color-yiq($message-app-bg) !default;
     }
 
     .btn.btn-link.btn-icon {
-        height: $icon-width;
+        height: $icon-height;
         width: $icon-width;
         padding: 0;
         border-radius: 50%;
@@ -508,7 +508,7 @@ $message-day-color: color-yiq($message-app-bg) !default;
         @each $size, $length in $iconsizes {
             &.icon-size-#{$size} {
                 height: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
-                width: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
+                width: (map-get($iconwidthsizes, $size) + 20px) !important; /* stylelint-disable-line declaration-no-important */
             }
         }
     }
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index f0618dcc999..348d868bb90 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -26155,8 +26155,12 @@ body.behat-site .action-menu .dropdown-subpanel-content.show {
   outline: 0;
 }
 
+a i.icon {
+  color: #1d2125;
+}
+
 .icon {
-  max-width: 24px;
+  max-width: 30px;
   max-height: 24px;
   margin: 0;
   padding: 0;
@@ -26168,25 +26172,25 @@ body.behat-site .action-menu .dropdown-subpanel-content.show {
 }
 .icon.iconsize-medium {
   font-size: 32px;
-  width: 32px;
+  width: 40px;
   height: 32px;
-  max-width: 32px;
+  max-width: 40px;
   max-height: 32px;
 }
 .icon.iconsize-big {
-  width: 64px;
+  width: 80px;
   height: 64px;
-  max-width: 64px;
+  max-width: 80px;
   max-height: 64px;
   font-size: 64px;
 }
 .icon.emoticon {
-  max-width: 16px;
+  max-width: 20px;
   max-height: 16px;
 }
 
 img.icon {
-  width: 16px;
+  width: 20px;
   height: 16px;
 }
 
@@ -26223,7 +26227,7 @@ img.icon {
 }
 
 .icon-large > .icon {
-  width: 32px;
+  width: 40px;
   height: 32px;
 }
 
@@ -26235,43 +26239,43 @@ img.icon {
 
 .icon-size-1 .icon {
   height: 4px !important; /* stylelint-disable-line declaration-no-important */
-  width: 4px !important; /* stylelint-disable-line declaration-no-important */
+  width: 5px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 4px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .icon-size-2 .icon {
   height: 8px !important; /* stylelint-disable-line declaration-no-important */
-  width: 8px !important; /* stylelint-disable-line declaration-no-important */
+  width: 10px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 8px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .icon-size-3 .icon {
   height: 16px !important; /* stylelint-disable-line declaration-no-important */
-  width: 16px !important; /* stylelint-disable-line declaration-no-important */
+  width: 20px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 16px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .icon-size-4 .icon {
   height: 24px !important; /* stylelint-disable-line declaration-no-important */
-  width: 24px !important; /* stylelint-disable-line declaration-no-important */
+  width: 30px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 24px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .icon-size-5 .icon {
   height: 32px !important; /* stylelint-disable-line declaration-no-important */
-  width: 32px !important; /* stylelint-disable-line declaration-no-important */
+  width: 40px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 32px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .icon-size-6 .icon {
   height: 40px !important; /* stylelint-disable-line declaration-no-important */
-  width: 40px !important; /* stylelint-disable-line declaration-no-important */
+  width: 50px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 40px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .icon-size-7 .icon {
   height: 48px !important; /* stylelint-disable-line declaration-no-important */
-  width: 48px !important; /* stylelint-disable-line declaration-no-important */
+  width: 60px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 48px !important; /* stylelint-disable-line declaration-no-important */
 }
 
@@ -26312,9 +26316,9 @@ img.icon {
   margin: 0;
   font-size: 32px;
   height: 32px;
-  width: 32px;
+  width: 40px;
   max-height: 32px;
-  max-width: 32px;
+  max-width: 40px;
 }
 .activityiconcontainer.small {
   width: 42px;
@@ -26329,9 +26333,9 @@ img.icon {
   max-height: 32px;
 }
 .activityiconcontainer.smaller .activityicon {
-  width: 32px;
+  width: 40px;
   height: 32px;
-  max-width: 32px;
+  max-width: 40px;
   max-height: 32px;
 }
 
@@ -26366,7 +26370,7 @@ img.icon {
 }
 
 .icon-box {
-  width: 48px;
+  width: 60px;
   height: 48px;
   display: inline-flex;
   justify-content: center;
@@ -26377,7 +26381,7 @@ img.icon {
 }
 .icon-box .icon {
   margin: 0;
-  height: 32px;
+  height: 40px;
   width: 32px;
 }
 
@@ -27329,7 +27333,7 @@ aside[id^=block-region-side-] .block_recentlyaccesseditems .card:nth-of-type(n+4
 .block-add .pluscontainer {
   border: 1px solid #3f89cc;
   border-radius: 50%;
-  width: 32px;
+  width: 40px;
   height: 32px;
 }
 .block-add:hover {
@@ -28164,7 +28168,7 @@ table.calendartable caption {
 }
 .course-section .action-menu .btn.btn-icon {
   height: 32px;
-  width: 32px;
+  width: 40px;
   border-radius: 0.5rem;
 }
 .course-section .action-menu.section-actions .btn.btn-icon {
@@ -28762,7 +28766,7 @@ table.calendartable caption {
 }
 .activity-item .activity-groupmode-info .groupmode-information {
   height: 32px;
-  width: 32px;
+  width: 40px;
   border-radius: 0.5rem;
 }
 .activity-item .activity-groupmode-info .groupmode-icon-info {
@@ -29053,7 +29057,7 @@ table.calendartable caption {
 }
 .activity.subsection .section .icons-collapse-expand:has(+ h4) {
   height: 24px;
-  width: 24px;
+  width: 30px;
   font-size: 0.8203125rem;
 }
 .activity.subsection .section h4 {
@@ -29567,7 +29571,7 @@ table.calendartable caption {
 #frontpage-category-combo .coursebox > .info > .coursename a {
   display: block;
   background-image: url([[pix:moodle|i/course]]);
-  background-size: 16px 16px;
+  background-size: 20px 16px;
   background-repeat: no-repeat;
   padding-left: 21px;
 }
@@ -29642,7 +29646,7 @@ table.calendartable caption {
 
 .course_category_tree .category.with_children > .info > .categoryname {
   background-image: url([[pix:moodle|t/expanded]]);
-  background-size: 16px 16px;
+  background-size: 20px 16px;
   background-repeat: no-repeat;
   background-position: center left;
 }
@@ -31466,7 +31470,7 @@ a.ygtvspacer:hover {
 }
 .message-app .btn.btn-link.btn-icon {
   height: 16px;
-  width: 16px;
+  width: 20px;
   padding: 0;
   border-radius: 50%;
   flex-shrink: 0;
@@ -31477,31 +31481,31 @@ a.ygtvspacer:hover {
 }
 .message-app .btn.btn-link.btn-icon.icon-size-1 {
   height: 24px !important; /* stylelint-disable-line declaration-no-important */
-  width: 24px !important; /* stylelint-disable-line declaration-no-important */
+  width: 25px !important; /* stylelint-disable-line declaration-no-important */
 }
 .message-app .btn.btn-link.btn-icon.icon-size-2 {
   height: 28px !important; /* stylelint-disable-line declaration-no-important */
-  width: 28px !important; /* stylelint-disable-line declaration-no-important */
+  width: 30px !important; /* stylelint-disable-line declaration-no-important */
 }
 .message-app .btn.btn-link.btn-icon.icon-size-3 {
   height: 36px !important; /* stylelint-disable-line declaration-no-important */
-  width: 36px !important; /* stylelint-disable-line declaration-no-important */
+  width: 40px !important; /* stylelint-disable-line declaration-no-important */
 }
 .message-app .btn.btn-link.btn-icon.icon-size-4 {
   height: 44px !important; /* stylelint-disable-line declaration-no-important */
-  width: 44px !important; /* stylelint-disable-line declaration-no-important */
+  width: 50px !important; /* stylelint-disable-line declaration-no-important */
 }
 .message-app .btn.btn-link.btn-icon.icon-size-5 {
   height: 52px !important; /* stylelint-disable-line declaration-no-important */
-  width: 52px !important; /* stylelint-disable-line declaration-no-important */
+  width: 60px !important; /* stylelint-disable-line declaration-no-important */
 }
 .message-app .btn.btn-link.btn-icon.icon-size-6 {
   height: 60px !important; /* stylelint-disable-line declaration-no-important */
-  width: 60px !important; /* stylelint-disable-line declaration-no-important */
+  width: 70px !important; /* stylelint-disable-line declaration-no-important */
 }
 .message-app .btn.btn-link.btn-icon.icon-size-7 {
   height: 68px !important; /* stylelint-disable-line declaration-no-important */
-  width: 68px !important; /* stylelint-disable-line declaration-no-important */
+  width: 80px !important; /* stylelint-disable-line declaration-no-important */
 }
 .message-app .view-overview-body .section {
   display: block;
@@ -34712,7 +34716,7 @@ img.userpicture {
 .path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist .itemactions .dropdown-toggle,
 .path-mod-feedback #feedback_edit_form .feedback_itemlist.sortable-list-is-dragged .itemactions .dropdown-toggle {
   border-radius: 0.5rem;
-  width: 32px;
+  width: 40px;
   height: 32px;
 }
 .path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist.sortable-list-current-position,
@@ -35170,7 +35174,7 @@ p.arrow_button {
 
 .btn.btn-icon {
   height: 36px;
-  width: 36px;
+  width: 40px;
   font-size: 16px;
   line-height: 16px;
   padding: 0;
@@ -35188,43 +35192,43 @@ p.arrow_button {
 }
 .btn.btn-icon.icon-size-1 {
   height: 24px !important; /* stylelint-disable-line declaration-no-important */
-  width: 24px !important; /* stylelint-disable-line declaration-no-important */
+  width: 25px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 4px !important; /* stylelint-disable-line declaration-no-important */
   line-height: 4px !important; /* stylelint-disable-line declaration-no-important */
 }
 .btn.btn-icon.icon-size-2 {
   height: 28px !important; /* stylelint-disable-line declaration-no-important */
-  width: 28px !important; /* stylelint-disable-line declaration-no-important */
+  width: 30px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 8px !important; /* stylelint-disable-line declaration-no-important */
   line-height: 8px !important; /* stylelint-disable-line declaration-no-important */
 }
 .btn.btn-icon.icon-size-3 {
   height: 36px !important; /* stylelint-disable-line declaration-no-important */
-  width: 36px !important; /* stylelint-disable-line declaration-no-important */
+  width: 40px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 16px !important; /* stylelint-disable-line declaration-no-important */
   line-height: 16px !important; /* stylelint-disable-line declaration-no-important */
 }
 .btn.btn-icon.icon-size-4 {
   height: 44px !important; /* stylelint-disable-line declaration-no-important */
-  width: 44px !important; /* stylelint-disable-line declaration-no-important */
+  width: 50px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 24px !important; /* stylelint-disable-line declaration-no-important */
   line-height: 24px !important; /* stylelint-disable-line declaration-no-important */
 }
 .btn.btn-icon.icon-size-5 {
   height: 52px !important; /* stylelint-disable-line declaration-no-important */
-  width: 52px !important; /* stylelint-disable-line declaration-no-important */
+  width: 60px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 32px !important; /* stylelint-disable-line declaration-no-important */
   line-height: 32px !important; /* stylelint-disable-line declaration-no-important */
 }
 .btn.btn-icon.icon-size-6 {
   height: 60px !important; /* stylelint-disable-line declaration-no-important */
-  width: 60px !important; /* stylelint-disable-line declaration-no-important */
+  width: 70px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 40px !important; /* stylelint-disable-line declaration-no-important */
   line-height: 40px !important; /* stylelint-disable-line declaration-no-important */
 }
 .btn.btn-icon.icon-size-7 {
   height: 68px !important; /* stylelint-disable-line declaration-no-important */
-  width: 68px !important; /* stylelint-disable-line declaration-no-important */
+  width: 80px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 48px !important; /* stylelint-disable-line declaration-no-important */
   line-height: 48px !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -37711,7 +37715,7 @@ div.editor_atto_toolbar button .icon {
 }
 .reportbuilder-table .action-menu .menubar .btn.btn-icon {
   height: 32px;
-  width: 32px;
+  width: 40px;
   border-radius: 0.5rem;
 }
 
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 00dd0751520..774c033709f 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -26155,8 +26155,12 @@ body.behat-site .action-menu .dropdown-subpanel-content.show {
   outline: 0;
 }
 
+a i.icon {
+  color: #1d2125;
+}
+
 .icon {
-  max-width: 24px;
+  max-width: 30px;
   max-height: 24px;
   margin: 0;
   padding: 0;
@@ -26168,25 +26172,25 @@ body.behat-site .action-menu .dropdown-subpanel-content.show {
 }
 .icon.iconsize-medium {
   font-size: 32px;
-  width: 32px;
+  width: 40px;
   height: 32px;
-  max-width: 32px;
+  max-width: 40px;
   max-height: 32px;
 }
 .icon.iconsize-big {
-  width: 64px;
+  width: 80px;
   height: 64px;
-  max-width: 64px;
+  max-width: 80px;
   max-height: 64px;
   font-size: 64px;
 }
 .icon.emoticon {
-  max-width: 16px;
+  max-width: 20px;
   max-height: 16px;
 }
 
 img.icon {
-  width: 16px;
+  width: 20px;
   height: 16px;
 }
 
@@ -26223,7 +26227,7 @@ img.icon {
 }
 
 .icon-large > .icon {
-  width: 32px;
+  width: 40px;
   height: 32px;
 }
 
@@ -26235,43 +26239,43 @@ img.icon {
 
 .icon-size-1 .icon {
   height: 4px !important; /* stylelint-disable-line declaration-no-important */
-  width: 4px !important; /* stylelint-disable-line declaration-no-important */
+  width: 5px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 4px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .icon-size-2 .icon {
   height: 8px !important; /* stylelint-disable-line declaration-no-important */
-  width: 8px !important; /* stylelint-disable-line declaration-no-important */
+  width: 10px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 8px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .icon-size-3 .icon {
   height: 16px !important; /* stylelint-disable-line declaration-no-important */
-  width: 16px !important; /* stylelint-disable-line declaration-no-important */
+  width: 20px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 16px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .icon-size-4 .icon {
   height: 24px !important; /* stylelint-disable-line declaration-no-important */
-  width: 24px !important; /* stylelint-disable-line declaration-no-important */
+  width: 30px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 24px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .icon-size-5 .icon {
   height: 32px !important; /* stylelint-disable-line declaration-no-important */
-  width: 32px !important; /* stylelint-disable-line declaration-no-important */
+  width: 40px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 32px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .icon-size-6 .icon {
   height: 40px !important; /* stylelint-disable-line declaration-no-important */
-  width: 40px !important; /* stylelint-disable-line declaration-no-important */
+  width: 50px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 40px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .icon-size-7 .icon {
   height: 48px !important; /* stylelint-disable-line declaration-no-important */
-  width: 48px !important; /* stylelint-disable-line declaration-no-important */
+  width: 60px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 48px !important; /* stylelint-disable-line declaration-no-important */
 }
 
@@ -26312,9 +26316,9 @@ img.icon {
   margin: 0;
   font-size: 32px;
   height: 32px;
-  width: 32px;
+  width: 40px;
   max-height: 32px;
-  max-width: 32px;
+  max-width: 40px;
 }
 .activityiconcontainer.small {
   width: 42px;
@@ -26329,9 +26333,9 @@ img.icon {
   max-height: 32px;
 }
 .activityiconcontainer.smaller .activityicon {
-  width: 32px;
+  width: 40px;
   height: 32px;
-  max-width: 32px;
+  max-width: 40px;
   max-height: 32px;
 }
 
@@ -26366,7 +26370,7 @@ img.icon {
 }
 
 .icon-box {
-  width: 48px;
+  width: 60px;
   height: 48px;
   display: inline-flex;
   justify-content: center;
@@ -26377,7 +26381,7 @@ img.icon {
 }
 .icon-box .icon {
   margin: 0;
-  height: 32px;
+  height: 40px;
   width: 32px;
 }
 
@@ -27329,7 +27333,7 @@ aside[id^=block-region-side-] .block_recentlyaccesseditems .card:nth-of-type(n+4
 .block-add .pluscontainer {
   border: 1px solid #3f89cc;
   border-radius: 50%;
-  width: 32px;
+  width: 40px;
   height: 32px;
 }
 .block-add:hover {
@@ -28164,7 +28168,7 @@ table.calendartable caption {
 }
 .course-section .action-menu .btn.btn-icon {
   height: 32px;
-  width: 32px;
+  width: 40px;
   border-radius: 0.25rem;
 }
 .course-section .action-menu.section-actions .btn.btn-icon {
@@ -28762,7 +28766,7 @@ table.calendartable caption {
 }
 .activity-item .activity-groupmode-info .groupmode-information {
   height: 32px;
-  width: 32px;
+  width: 40px;
   border-radius: 0.25rem;
 }
 .activity-item .activity-groupmode-info .groupmode-icon-info {
@@ -29053,7 +29057,7 @@ table.calendartable caption {
 }
 .activity.subsection .section .icons-collapse-expand:has(+ h4) {
   height: 24px;
-  width: 24px;
+  width: 30px;
   font-size: 0.8203125rem;
 }
 .activity.subsection .section h4 {
@@ -29567,7 +29571,7 @@ table.calendartable caption {
 #frontpage-category-combo .coursebox > .info > .coursename a {
   display: block;
   background-image: url([[pix:moodle|i/course]]);
-  background-size: 16px 16px;
+  background-size: 20px 16px;
   background-repeat: no-repeat;
   padding-left: 21px;
 }
@@ -29642,7 +29646,7 @@ table.calendartable caption {
 
 .course_category_tree .category.with_children > .info > .categoryname {
   background-image: url([[pix:moodle|t/expanded]]);
-  background-size: 16px 16px;
+  background-size: 20px 16px;
   background-repeat: no-repeat;
   background-position: center left;
 }
@@ -31466,7 +31470,7 @@ a.ygtvspacer:hover {
 }
 .message-app .btn.btn-link.btn-icon {
   height: 16px;
-  width: 16px;
+  width: 20px;
   padding: 0;
   border-radius: 50%;
   flex-shrink: 0;
@@ -31477,31 +31481,31 @@ a.ygtvspacer:hover {
 }
 .message-app .btn.btn-link.btn-icon.icon-size-1 {
   height: 24px !important; /* stylelint-disable-line declaration-no-important */
-  width: 24px !important; /* stylelint-disable-line declaration-no-important */
+  width: 25px !important; /* stylelint-disable-line declaration-no-important */
 }
 .message-app .btn.btn-link.btn-icon.icon-size-2 {
   height: 28px !important; /* stylelint-disable-line declaration-no-important */
-  width: 28px !important; /* stylelint-disable-line declaration-no-important */
+  width: 30px !important; /* stylelint-disable-line declaration-no-important */
 }
 .message-app .btn.btn-link.btn-icon.icon-size-3 {
   height: 36px !important; /* stylelint-disable-line declaration-no-important */
-  width: 36px !important; /* stylelint-disable-line declaration-no-important */
+  width: 40px !important; /* stylelint-disable-line declaration-no-important */
 }
 .message-app .btn.btn-link.btn-icon.icon-size-4 {
   height: 44px !important; /* stylelint-disable-line declaration-no-important */
-  width: 44px !important; /* stylelint-disable-line declaration-no-important */
+  width: 50px !important; /* stylelint-disable-line declaration-no-important */
 }
 .message-app .btn.btn-link.btn-icon.icon-size-5 {
   height: 52px !important; /* stylelint-disable-line declaration-no-important */
-  width: 52px !important; /* stylelint-disable-line declaration-no-important */
+  width: 60px !important; /* stylelint-disable-line declaration-no-important */
 }
 .message-app .btn.btn-link.btn-icon.icon-size-6 {
   height: 60px !important; /* stylelint-disable-line declaration-no-important */
-  width: 60px !important; /* stylelint-disable-line declaration-no-important */
+  width: 70px !important; /* stylelint-disable-line declaration-no-important */
 }
 .message-app .btn.btn-link.btn-icon.icon-size-7 {
   height: 68px !important; /* stylelint-disable-line declaration-no-important */
-  width: 68px !important; /* stylelint-disable-line declaration-no-important */
+  width: 80px !important; /* stylelint-disable-line declaration-no-important */
 }
 .message-app .view-overview-body .section {
   display: block;
@@ -34712,7 +34716,7 @@ img.userpicture {
 .path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist .itemactions .dropdown-toggle,
 .path-mod-feedback #feedback_edit_form .feedback_itemlist.sortable-list-is-dragged .itemactions .dropdown-toggle {
   border-radius: 0.5rem;
-  width: 32px;
+  width: 40px;
   height: 32px;
 }
 .path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist.sortable-list-current-position,
@@ -35170,7 +35174,7 @@ p.arrow_button {
 
 .btn.btn-icon {
   height: 36px;
-  width: 36px;
+  width: 40px;
   font-size: 16px;
   line-height: 16px;
   padding: 0;
@@ -35188,43 +35192,43 @@ p.arrow_button {
 }
 .btn.btn-icon.icon-size-1 {
   height: 24px !important; /* stylelint-disable-line declaration-no-important */
-  width: 24px !important; /* stylelint-disable-line declaration-no-important */
+  width: 25px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 4px !important; /* stylelint-disable-line declaration-no-important */
   line-height: 4px !important; /* stylelint-disable-line declaration-no-important */
 }
 .btn.btn-icon.icon-size-2 {
   height: 28px !important; /* stylelint-disable-line declaration-no-important */
-  width: 28px !important; /* stylelint-disable-line declaration-no-important */
+  width: 30px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 8px !important; /* stylelint-disable-line declaration-no-important */
   line-height: 8px !important; /* stylelint-disable-line declaration-no-important */
 }
 .btn.btn-icon.icon-size-3 {
   height: 36px !important; /* stylelint-disable-line declaration-no-important */
-  width: 36px !important; /* stylelint-disable-line declaration-no-important */
+  width: 40px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 16px !important; /* stylelint-disable-line declaration-no-important */
   line-height: 16px !important; /* stylelint-disable-line declaration-no-important */
 }
 .btn.btn-icon.icon-size-4 {
   height: 44px !important; /* stylelint-disable-line declaration-no-important */
-  width: 44px !important; /* stylelint-disable-line declaration-no-important */
+  width: 50px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 24px !important; /* stylelint-disable-line declaration-no-important */
   line-height: 24px !important; /* stylelint-disable-line declaration-no-important */
 }
 .btn.btn-icon.icon-size-5 {
   height: 52px !important; /* stylelint-disable-line declaration-no-important */
-  width: 52px !important; /* stylelint-disable-line declaration-no-important */
+  width: 60px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 32px !important; /* stylelint-disable-line declaration-no-important */
   line-height: 32px !important; /* stylelint-disable-line declaration-no-important */
 }
 .btn.btn-icon.icon-size-6 {
   height: 60px !important; /* stylelint-disable-line declaration-no-important */
-  width: 60px !important; /* stylelint-disable-line declaration-no-important */
+  width: 70px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 40px !important; /* stylelint-disable-line declaration-no-important */
   line-height: 40px !important; /* stylelint-disable-line declaration-no-important */
 }
 .btn.btn-icon.icon-size-7 {
   height: 68px !important; /* stylelint-disable-line declaration-no-important */
-  width: 68px !important; /* stylelint-disable-line declaration-no-important */
+  width: 80px !important; /* stylelint-disable-line declaration-no-important */
   font-size: 48px !important; /* stylelint-disable-line declaration-no-important */
   line-height: 48px !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -37645,7 +37649,7 @@ div.editor_atto_toolbar button .icon {
 }
 .reportbuilder-table .action-menu .menubar .btn.btn-icon {
   height: 32px;
-  width: 32px;
+  width: 40px;
   border-radius: 0.25rem;
 }
 
-- 
2.43.0