diff --git a/lib/classes/output/choicelist.php b/lib/classes/output/choicelist.php
index ae38e786329..20f6f37ebe5 100644
--- a/lib/classes/output/choicelist.php
+++ b/lib/classes/output/choicelist.php
@@ -169,7 +169,7 @@ class choicelist implements renderable, named_templatable {
         $options = [];
         foreach ($this->options as $option) {
             if (!empty($option['icon'])) {
-                $option['icon'] = $option['icon']->export_for_template($output);
+                $option['icon'] = $option['icon']->export_for_pix($output);
             }
             $option['hasicon'] = !empty($option['icon']);
 
diff --git a/lib/templates/local/choicelist.mustache b/lib/templates/local/choicelist.mustache
index 5b03d2fb560..73bd2c4a846 100644
--- a/lib/templates/local/choicelist.mustache
+++ b/lib/templates/local/choicelist.mustache
@@ -78,53 +78,8 @@
         ]
     }
 }}
-<div class="d-flex flex-column choicelist" role="listbox">
+<div class="d-flex flex-column choicelist p-1" role="listbox">
     {{#options}}
-    <div
-        class="d-flex flex-row align-items-start p-2 position-relative rounded {{!
-            }} {{#disabled}} dimmed_text {{/disabled}} {{!
-            }} {{#selected}} bg-light selected {{/selected}}"
-        data-optionnumber="{{optionnumber}}"
-        data-selected="{{selected}}"
-    >
-        {{#icon}}
-        <div class="option-icon">
-            {{>core/pix_icon}}
-        </div>
-        {{/icon}}
-        <div class="option-select-indicator">
-            {{#selected}}
-                {{#pix}} i/checkedcircle, core, {{#str}} selected, form {{/str}} {{/pix}}
-            {{/selected}}
-            {{^selected}}
-                {{#pix}} i/uncheckedcircle{{/pix}}
-            {{/selected}}
-        </div>
-        <div class="option-name">
-            <a
-                class="stretched-link text-wrap {{!
-                    }} {{#disabled}} disabled {{/disabled}} {{!
-                    }} {{#selected}} selected disabled {{/selected}}"
-                role="option"
-                {{#selected}} aria-selected="true" {{/selected}}
-                {{#description}} aria-describedby="{{optionuniqid}}" {{/description}}
-                data-value="{{value}}"
-                {{#hasurl}} href="{{{url}}}" {{/hasurl}}
-                {{! If there is no url, supose JS will handle it somehow. }}
-                {{^hasurl}} href="#" {{/hasurl}}
-                {{#disabled}} tabindex="-1" {{/disabled}}
-                {{#extras}}
-                    {{attribute}}="{{value}}"
-                {{/extras}}
-            >
-                {{name}}
-            </a>
-            {{#description}}
-            <div id="{{optionuniqid}}" class="option-description small text-muted text-wrap">
-                {{{description}}}
-            </div>
-            {{/description}}
-        </div>
-    </div>
+        {{> core/local/choicelist/option}}
     {{/options}}
 </div>
diff --git a/lib/templates/local/choicelist/option.mustache b/lib/templates/local/choicelist/option.mustache
new file mode 100644
index 00000000000..b36355ae36f
--- /dev/null
+++ b/lib/templates/local/choicelist/option.mustache
@@ -0,0 +1,100 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/local/choicelist/option
+
+    Default template for a choicelist option.
+
+    Any mustache can user this template to render options in a custom choicelist wrapper.
+
+    Classes required for JS:
+    * none
+
+    Context variables required for this template:
+    * optionuniqid String - unique option id.
+    * value String - option value.
+    * name String - options name.
+    * optionnumber Number - option number.
+
+    Example context (json):
+    {
+        "value": "value2",
+        "name": "Second option",
+        "description": "Second option description",
+        "icon": {
+            "extraclasses": "iconhelp",
+            "attributes": [
+                {"name": "src", "value": "../../../pix/help.svg"},
+                {"name": "alt", "value": "Help icon"}
+            ]
+        },
+        "hasicon": true,
+        "optionnumber": 2,
+        "optionuniqid": "option2uniqid",
+        "selected": true
+    }
+}}
+<div
+    class="d-flex flex-row align-items-start p-2 mb-1 {{!
+        }} position-relative rounded dropdown-item-outline {{!
+        }} {{#disabled}} dimmed_text {{/disabled}} {{!
+        }} {{#selected}} border bg-primary-light selected {{/selected}}"
+    data-optionnumber="{{optionnumber}}"
+    data-selected="{{selected}}"
+>
+    <div class="option-select-indicator">
+        <span class="{{^selected}} d-none {{/selected}}" data-for="checkedIcon">
+            {{#pix}} i/checkedcircle, core, {{#str}} selected, form {{/str}} {{/pix}}
+        </span>
+        <span class="{{#selected}} d-none {{/selected}}" data-for="uncheckedIcon">
+            {{#pix}} i/uncheckedcircle{{/pix}}
+        </span>
+    </div>
+    {{#icon}}
+    <div class="option-icon">
+        {{#pix}}{{key}}, {{component}}, {{title}}{{/pix}}
+    </div>
+    {{/icon}}
+    <div class="option-name">
+        <a
+            class="stretched-link text-wrap font-weight-bold {{!
+                }} {{^disabled}} text-dark {{/disabled}} {{!
+                }} {{#disabled}} disabled {{/disabled}} {{!
+                }} {{#selected}} selected {{/selected}}"
+            role="option"
+            {{#selected}} aria-selected="true" {{/selected}}
+            {{#description}} aria-describedby="{{optionuniqid}}" {{/description}}
+            data-value="{{value}}"
+            {{#hasurl}} href="{{{url}}}" {{/hasurl}}
+            {{! If there is no url, supose JS will handle it somehow. }}
+            {{^hasurl}} href="#" {{/hasurl}}
+            {{#disabled}} tabindex="-1" {{/disabled}}
+            {{#extras}}
+                {{attribute}}="{{value}}"
+            {{/extras}}
+        >
+            {{name}}
+        </a>
+        {{#description}}
+        <div
+            id="{{optionuniqid}}"
+            class="option-description small text-muted text-wrap">
+            {{{description}}}
+        </div>
+        {{/description}}
+    </div>
+</div>
diff --git a/lib/templates/local/dropdown/status.mustache b/lib/templates/local/dropdown/status.mustache
index 56a238fbcd2..44e254d6e0e 100644
--- a/lib/templates/local/dropdown/status.mustache
+++ b/lib/templates/local/dropdown/status.mustache
@@ -95,60 +95,7 @@
         <div class="pb-2 border-bottom">{{{dialogcontent}}}</div>
         {{/dialogcontent}}
         {{#choices}}
-        <div class="d-flex flex-column" role="listbox">
-            {{#options}}
-            <div
-                class="d-flex flex-row align-items-start p-2 mb-1 {{!
-                    }} position-relative rounded dropdown-item-outline {{!
-                    }} {{#disabled}} dimmed_text {{/disabled}} {{!
-                    }} {{#selected}} bg-light selected {{/selected}}"
-                data-optionnumber="{{optionnumber}}"
-                data-selected="{{selected}}"
-            >
-                {{#icon}}
-                <div class="option-icon">
-                    {{>core/pix_icon}}
-                </div>
-                {{/icon}}
-                <div class="option-select-indicator">
-                    <span class="{{^selected}} d-none {{/selected}}" data-for="checkedIcon">
-                        {{#pix}} i/checkedcircle, core, {{#str}} selected, form {{/str}} {{/pix}}
-                    </span>
-                    <span class="{{#selected}} d-none {{/selected}}" data-for="uncheckedIcon">
-                        {{#pix}} i/uncheckedcircle{{/pix}}
-                    </span>
-                </div>
-                <div class="option-name">
-                    <a
-                        class="stretched-link {{!
-                            }} {{#disabled}} disabled {{/disabled}} {{!
-                            }} {{#selected}} selected disabled {{/selected}}"
-                        role="option"
-                        {{#selected}} aria-selected="true" {{/selected}}
-                        {{#description}} aria-describedby="{{optionuniqid}}" {{/description}}
-                        data-value="{{value}}"
-                        {{#hasurl}} href="{{{url}}}" {{/hasurl}}
-                        {{! If there is no url, supose JS will handle it somehow. }}
-                        {{^hasurl}} href="#" {{/hasurl}}
-                        {{#disabled}} tabindex="-1" {{/disabled}}
-                        {{#disabled}} aria-disabled="true" {{/disabled}}
-                        {{$extras}}
-                            {{#extras}}
-                                {{attribute}}="{{value}}"
-                            {{/extras}}
-                        {{/extras}}
-                    >
-                        {{name}}
-                    </a>
-                    {{#description}}
-                    <div id="{{optionuniqid}}" class="small text-muted">
-                        {{{description}}}
-                    </div>
-                    {{/description}}
-                </div>
-            </div>
-            {{/options}}
-        </div>
+            {{> core/local/choicelist }}
         {{/choices}}
     {{/ dialogcontent }}
 {{/ core/local/dropdown/dialog }}
diff --git a/theme/boost/scss/moodle/action-menu.scss b/theme/boost/scss/moodle/action-menu.scss
index caed9f2208a..e5fa45503b5 100644
--- a/theme/boost/scss/moodle/action-menu.scss
+++ b/theme/boost/scss/moodle/action-menu.scss
@@ -30,10 +30,6 @@
     .dropdown-subpanel-content {
         max-width: $modal-sm;
         box-shadow: 0 0 1rem rgba($black, .15);
-
-        a:focus {
-            outline: solid $primary;
-        }
     }
 
     .dropdown-subpanel-content.show {
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index 6e194e4fab2..91d962b809e 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -257,6 +257,10 @@ button.close,
     color: map-get($theme-colors, 'info');
 }
 
+.bg-primary-light {
+    background-color: $primary-light-background;
+}
+
 .fitem.advanced .text-info {
     font-weight: bold;
 }
@@ -3178,18 +3182,11 @@ blockquote {
 
 /* Choice list component. */
 .choicelist {
-    min-width: $modal-sm;
-}
+    // Choicelist is designed to fit inside a small modal.
+    min-width: calc(#{$modal-sm} - 25px);
 
-[data-region="fixed-drawer"] {
-    .choicelist {
-        min-width: calc(#{$modal-sm} - 25px);
-    }
-}
-
-@include media-breakpoint-down(xs) {
-    // Modal small are larger than xs breakpoint.
-    .choicelist {
-        min-width: calc(#{$modal-sm} - 25px);
+    // Align the font based icons.
+    i.icon {
+        vertical-align: middle;
     }
 }
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index b2b1e706d0c..a6937acb0c8 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -23138,6 +23138,10 @@ button.close:focus:hover,
   color: #008196;
 }
 
+.bg-primary-light {
+  background-color: #f5f9fc;
+}
+
 .fitem.advanced .text-info {
   font-weight: bold;
 }
@@ -25985,18 +25989,12 @@ blockquote {
 
 /* Choice list component. */
 .choicelist {
-  min-width: 300px;
-}
-
-[data-region=fixed-drawer] .choicelist {
   min-width: calc(300px - 25px);
 }
-
-@media (max-width: 575.98px) {
-  .choicelist {
-    min-width: calc(300px - 25px);
-  }
+.choicelist i.icon {
+  vertical-align: middle;
 }
+
 .action-menu .dropdown-toggle {
   text-decoration: none;
   display: inline-block;
@@ -26023,9 +26021,6 @@ blockquote {
   max-width: 300px;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
 }
-.action-menu .dropdown-subpanel-content a:focus {
-  outline: solid #0f6cbf;
-}
 .action-menu .dropdown-subpanel-content.show {
   animation: 0.15s animate-pop;
 }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index b5c23fa266e..e9bbe18974d 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -23138,6 +23138,10 @@ button.close:focus:hover,
   color: #008196;
 }
 
+.bg-primary-light {
+  background-color: #f5f9fc;
+}
+
 .fitem.advanced .text-info {
   font-weight: bold;
 }
@@ -25985,18 +25989,12 @@ blockquote {
 
 /* Choice list component. */
 .choicelist {
-  min-width: 300px;
-}
-
-[data-region=fixed-drawer] .choicelist {
   min-width: calc(300px - 25px);
 }
-
-@media (max-width: 575.98px) {
-  .choicelist {
-    min-width: calc(300px - 25px);
-  }
+.choicelist i.icon {
+  vertical-align: middle;
 }
+
 .action-menu .dropdown-toggle {
   text-decoration: none;
   display: inline-block;
@@ -26023,9 +26021,6 @@ blockquote {
   max-width: 300px;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
 }
-.action-menu .dropdown-subpanel-content a:focus {
-  outline: solid #0f6cbf;
-}
 .action-menu .dropdown-subpanel-content.show {
   animation: 0.15s animate-pop;
 }