MDL-58426 icons: Fix CSS for displaying big icons

The expected size of icons in the pix/b/ (big) folder was not respected
and they were displayed as 16x16 px.

lib/outputcomponents.php

@@ -662,6 +662,11 @@ class pix_icon implements renderable, templatable {
             $this->attributes['class'] = '';
         }
 
+        // Set an additional class for big icons so that they can be styled properly.
+        if (substr($pix, 0, 2) === 'b/') {
+            $this->attributes['class'] .= ' iconsize-big';
+        }
+
         // If the alt is empty, don't place it in the attributes, otherwise it will override parent alt text.
         if (!is_null($alt)) {
             $this->attributes['alt'] = $alt;

theme/boost/scss/moodle/icons.scss

@@ -1,8 +1,12 @@
 // The only class we need for icons is .icon
 // Standardize the size, padding and alignment for all icons in Moodle.
 
+// Size of default icons.
 $icon-width: 16px;
 $icon-height: 16px;
+// Size of big icons.
+$icon-big-width: 64px;
+$icon-big-height: 64px;
 
 .icon {
     font-size: $icon-height;
@@ -17,6 +21,11 @@ $icon-height: 16px;
     &.spacer {
         margin-right: 0;
     }
+
+    &.iconsize-big {
+        width: $icon-big-width;
+        height: $icon-big-height;
+    }
 }
 
 $icon-color: $body-color !default;

theme/bootstrapbase/less/moodle/core.less

@@ -16,6 +16,13 @@
     display: none;
 }
 
+// Size of default icons.
+@icon-width: 16px;
+@icon-height: 16px;
+// Size of big icons.
+@icon-big-width: 64px;
+@icon-big-height: 64px;
+
 /* Default Three Columns - All
 ------------------------------*/
 
@@ -233,10 +240,14 @@ img.resize {
 }
 /* Icon styles */
 img.icon {
-    height: 16px;
+    height: @icon-height;
     vertical-align: text-bottom;
-    width: 16px;
+    width: @icon-width;
     padding-right: 6px;
+    &.iconsize-big {
+        width: @icon-big-width;
+        height: @icon-big-height;
+    }
 }
 img.iconsmall {
     height: 12px;

theme/bootstrapbase/style/moodle.css

@@ -2546,6 +2546,10 @@ img.icon {
   width: 16px;
   padding-right: 6px;
 }
+img.icon.iconsize-big {
+  width: 64px;
+  height: 64px;
+}
 img.iconsmall {
   height: 12px;
   margin-right: 3px;