diff --git a/src/addons/badges/pages/user-badges/user-badges.html b/src/addons/badges/pages/user-badges/user-badges.html
index 8b872cbea..d91a5e0e8 100644
--- a/src/addons/badges/pages/user-badges/user-badges.html
+++ b/src/addons/badges/pages/user-badges/user-badges.html
@@ -19,7 +19,7 @@
 
             <ion-list *ngIf="!badges.empty" class="ion-no-margin">
                 <ion-item button class="ion-text-wrap" *ngFor="let badge of badges.items" [attr.aria-label]="badge.name"
-                    (click)="badges.select(badge)" [attr.aria-current]="badges.getItemAriaCurrent(badge)" detail="true">
+                    (click)="badges.select(badge)" [attr.aria-current]="badges.getItemAriaCurrent(badge)" [detail]="true">
                     <ion-avatar slot="start">
                         <img [src]="badge.badgeurl" [alt]="badge.name" core-external-content>
                     </ion-avatar>
diff --git a/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html b/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
index b4f800003..98aebcd59 100644
--- a/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
+++ b/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
@@ -1,10 +1,10 @@
-<ion-item-divider sticky="true">
+<ion-item-divider [sticky]="true">
     <ion-label>
         <h2>{{ 'addon.block_activitymodules.pluginname' | translate }}</h2>
     </ion-label>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded">
-    <ion-item class="ion-text-wrap" *ngFor="let entry of entries" detail="true" button (click)="gotoCoureListModType(entry)">
+    <ion-item class="ion-text-wrap" *ngFor="let entry of entries" [detail]="true" button (click)="gotoCoureListModType(entry)">
         <core-mod-icon slot="start" [modicon]="entry.icon" [modname]="entry.iconModName" [showAlt]="false">
         </core-mod-icon>
         <ion-label>{{ entry.name }}</ion-label>
diff --git a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
index 90adc25e6..176c08c90 100644
--- a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
+++ b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
@@ -1,4 +1,4 @@
-<ion-item-divider sticky="true">
+<ion-item-divider [sticky]="true">
     <ion-label>
         <h2>{{ 'addon.block_myoverview.pluginname' | translate }}</h2>
     </ion-label>
diff --git a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html b/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
index d4b28ea36..66e1245d7 100644
--- a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
+++ b/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
@@ -1,4 +1,4 @@
-<ion-item-divider sticky="true">
+<ion-item-divider [sticky]="true">
     <ion-label>
         <h2>{{ 'addon.block_recentlyaccessedcourses.pluginname' | translate }}</h2>
     </ion-label>
diff --git a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
index 2b185a878..9d157d6d1 100644
--- a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
+++ b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
@@ -1,4 +1,4 @@
-<ion-item-divider sticky="true">
+<ion-item-divider [sticky]="true">
     <ion-label>
         <h2>{{ 'addon.block_recentlyaccesseditems.pluginname' | translate }}</h2>
     </ion-label>
@@ -14,7 +14,7 @@
             <div class="safe-area-pseudo-padding-start"></div>
             <div *ngFor="let item of items" class="core-horizontal-scroll-item">
                 <ion-card>
-                    <ion-item class="core-course-module-handler ion-text-wrap" detail="false" (click)="action($event, item)" button>
+                    <ion-item class="core-course-module-handler ion-text-wrap" [detail]="false" (click)="action($event, item)" button>
                         <core-mod-icon slot="start" *ngIf="item.iconUrl" [modicon]="item.iconUrl" [modname]="item.modname"
                             [componentId]="item.cmid" [showAlt]="false" [purpose]="item.purpose">
                         </core-mod-icon>
diff --git a/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html b/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
index 11bc7d2b8..4b6d5b6ba 100644
--- a/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
+++ b/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
@@ -1,4 +1,4 @@
-<ion-item-divider sticky="true">
+<ion-item-divider [sticky]="true">
     <ion-label>
         <h2>{{ 'addon.block_sitemainmenu.pluginname' | translate }}</h2>
     </ion-label>
diff --git a/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html b/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
index 88e7fdfce..7d297b771 100644
--- a/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
+++ b/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
@@ -1,4 +1,4 @@
-<ion-item-divider sticky="true">
+<ion-item-divider [sticky]="true">
     <ion-label>
         <h2>{{ 'addon.block_starredcourses.pluginname' | translate }}</h2>
     </ion-label>
diff --git a/src/addons/block/timeline/components/events/addon-block-timeline-events.html b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
index 4428d0f64..d84981b96 100644
--- a/src/addons/block/timeline/components/events/addon-block-timeline-events.html
+++ b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
@@ -14,7 +14,7 @@
         </ion-label>
     </ion-item>
     <ng-container *ngFor="let event of dayEvents.events">
-        <ion-item class="addon-block-timeline-activity" detail="false" (click)="action($event, event.url)" [attr.aria-label]="event.name"
+        <ion-item class="addon-block-timeline-activity" [detail]="false" (click)="action($event, event.url)" [attr.aria-label]="event.name"
             button lines="full">
             <ion-label>
                 <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding">
diff --git a/src/addons/block/timeline/components/timeline/addon-block-timeline.html b/src/addons/block/timeline/components/timeline/addon-block-timeline.html
index 92d911286..b20b7952d 100644
--- a/src/addons/block/timeline/components/timeline/addon-block-timeline.html
+++ b/src/addons/block/timeline/components/timeline/addon-block-timeline.html
@@ -1,4 +1,4 @@
-<ion-item-divider sticky="true">
+<ion-item-divider [sticky]="true">
     <ion-label>
         <h2>{{ 'addon.block_timeline.pluginname' | translate }}</h2>
     </ion-label>
diff --git a/src/addons/blog/pages/entries/entries.html b/src/addons/blog/pages/entries/entries.html
index fb9ffa77c..ff2f5d39b 100644
--- a/src/addons/blog/pages/entries/entries.html
+++ b/src/addons/blog/pages/entries/entries.html
@@ -65,7 +65,7 @@
                     <core-file *ngFor="let file of entry.attachmentfiles" [file]="file" [component]="this.component"
                         [componentId]="entry.id">
                     </core-file>
-                    <ion-item *ngIf="entry.uniquehash" [href]="entry.uniquehash" core-link detail="true">
+                    <ion-item *ngIf="entry.uniquehash" [href]="entry.uniquehash" core-link [detail]="true">
                         <ion-label>{{ 'addon.blog.linktooriginalentry' | translate }}</ion-label>
                     </ion-item>
                 </ion-card-content>
diff --git a/src/addons/calendar/pages/event/event.html b/src/addons/calendar/pages/event/event.html
index 494a78e42..81a83d325 100644
--- a/src/addons/calendar/pages/event/event.html
+++ b/src/addons/calendar/pages/event/event.html
@@ -72,7 +72,7 @@
                     <p>{{ 'addon.calendar.type' + event.formattedType | translate }}</p>
                 </ion-label>
             </ion-item>
-            <ion-item class="ion-text-wrap" *ngIf="courseName" [href]="courseUrl" core-link capture="true" detail="true">
+            <ion-item class="ion-text-wrap" *ngIf="courseName" [href]="courseUrl" core-link capture="true" [detail]="true">
                 <ion-label>
                     <p class="item-heading">{{ 'core.course' | translate}}</p>
                     <p>
diff --git a/src/addons/competency/pages/competencies/competencies.html b/src/addons/competency/pages/competencies/competencies.html
index 72793a1db..33b3afe43 100644
--- a/src/addons/competency/pages/competencies/competencies.html
+++ b/src/addons/competency/pages/competencies/competencies.html
@@ -20,7 +20,7 @@
             <ion-list>
                 <ion-item class="ion-text-wrap" *ngFor="let competency of competencies.items"
                     [attr.aria-label]="competency.competency.shortname" (click)="competencies.select(competency)"
-                    [attr.aria-current]="competencies.getItemAriaCurrent(competency)" button detail="true">
+                    [attr.aria-current]="competencies.getItemAriaCurrent(competency)" button [detail]="true">
                     <ion-label>
                         <p class="item-heading">
                             <core-format-text [text]="competency.competency.shortname" [contextLevel]="contextLevel"
diff --git a/src/addons/competency/pages/coursecompetencies/coursecompetencies.html b/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
index f4afee0b4..5d5369b94 100644
--- a/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
+++ b/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
@@ -65,7 +65,7 @@
         <div *ngIf="competencies.loaded">
             <ion-card *ngFor="let competency of competencies.items">
                 <ion-item class="ion-text-wrap" (click)="competencies.select(competency)"
-                    [attr.aria-label]="competency.competency.shortname" detail="true" button>
+                    [attr.aria-label]="competency.competency.shortname" [detail]="true" button>
                     <ion-label>
                         <p class="item-heading">
                             <core-format-text [text]="competency.competency.shortname" contextLevel="course" [contextInstanceId]="courseId">
diff --git a/src/addons/competency/pages/plan/plan.html b/src/addons/competency/pages/plan/plan.html
index 5090642c4..dbe729263 100644
--- a/src/addons/competency/pages/plan/plan.html
+++ b/src/addons/competency/pages/plan/plan.html
@@ -81,7 +81,7 @@
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngFor="let competency of competencies.items" (click)="competencies.select(competency)"
-                    [attr.aria-label]="competency.competency.shortname" detail="true" button>
+                    [attr.aria-label]="competency.competency.shortname" [detail]="true" button>
                     <ion-label>
                         <p class="item-heading">
                             <core-format-text [text]="competency.competency.shortname" contextLevel="user"
diff --git a/src/addons/competency/pages/planlist/planlist.html b/src/addons/competency/pages/planlist/planlist.html
index c1959b4a9..f980c458b 100644
--- a/src/addons/competency/pages/planlist/planlist.html
+++ b/src/addons/competency/pages/planlist/planlist.html
@@ -19,7 +19,7 @@
             </core-empty-box>
             <ion-list *ngIf="!plans.empty" class="ion-no-margin">
                 <ion-item class="ion-text-wrap" *ngFor="let plan of plans.items" [attr.aria-label]="plan.name" (click)="plans.select(plan)"
-                    [attr.aria-current]="plans.getItemAriaCurrent(plan)" button detail="true">
+                    [attr.aria-current]="plans.getItemAriaCurrent(plan)" button [detail]="true">
                     <ion-label>
                         <p class="item-heading">
                             <core-format-text [text]="plan.name" contextLevel="user" [contextInstanceId]="plan.userid">
diff --git a/src/addons/messages/components/conversation-info/conversation-info.html b/src/addons/messages/components/conversation-info/conversation-info.html
index 3a4fb4af7..8d53b3dce 100644
--- a/src/addons/messages/components/conversation-info/conversation-info.html
+++ b/src/addons/messages/components/conversation-info/conversation-info.html
@@ -35,7 +35,7 @@
         </ion-item>
 
         <ion-item class="ion-text-wrap addon-messages-conversation-item" *ngFor="let member of members" (click)="closeModal(member.id)"
-            detail="true" button>
+            [detail]="true" button>
             <core-user-avatar [user]="member" [linkProfile]="false" [checkOnline]="member.showonlinestatus" slot="start">
             </core-user-avatar>
             <ion-label>
diff --git a/src/addons/messages/pages/contacts-35/contacts.html b/src/addons/messages/pages/contacts-35/contacts.html
index 314a3b0d0..e79d83c11 100644
--- a/src/addons/messages/pages/contacts-35/contacts.html
+++ b/src/addons/messages/pages/contacts-35/contacts.html
@@ -42,7 +42,7 @@
                         <!-- Don't show deleted users -->
                         <ion-item class="ion-text-wrap addon-messages-conversation-item"
                             *ngIf="contact.profileimageurl || contact.profileimageurlsmall" [attr.aria-label]="contact.fullname"
-                            (click)="gotoDiscussion(contact.id)" detail="true" button
+                            (click)="gotoDiscussion(contact.id)" [detail]="true" button
                             [attr.aria-current]="contact.id == discussionUserId ? 'page' : 'false'">
                             <core-user-avatar [user]="contact" slot="start" [checkOnline]="contact.showonlinestatus"></core-user-avatar>
                             <ion-label>
diff --git a/src/addons/messages/pages/contacts/contacts.html b/src/addons/messages/pages/contacts/contacts.html
index c049589e0..1ac693568 100644
--- a/src/addons/messages/pages/contacts/contacts.html
+++ b/src/addons/messages/pages/contacts/contacts.html
@@ -28,7 +28,7 @@
                     <core-loading [hideUntil]="confirmedLoaded">
                         <ion-list class="ion-no-margin" *ngIf="confirmedContacts.length">
                             <ion-item class="ion-text-wrap addon-messages-conversation-item" (click)="selectUser(contact.id)" button
-                                *ngFor="let contact of confirmedContacts" [attr.aria-label]="contact.fullname" detail="true"
+                                *ngFor="let contact of confirmedContacts" [attr.aria-label]="contact.fullname" [detail]="true"
                                 [attr.aria-current]="contact.id == selectedUserId ? 'page' : 'false'">
                                 <core-user-avatar slot="start" [user]="contact" [checkOnline]="contact.showonlinestatus"
                                     [linkProfile]="false">
@@ -67,7 +67,7 @@
                         <ion-list class="ion-no-margin" *ngIf="requests.length">
                             <ion-item class="ion-text-wrap addon-messages-conversation-item" *ngFor="let request of requests"
                                 [attr.aria-label]="request.fullname" (click)="selectUser(request.id)" button
-                                [attr.aria-current]="request.id == selectedUserId ? 'page' : 'false'" detail="true">
+                                [attr.aria-current]="request.id == selectedUserId ? 'page' : 'false'" [detail]="true">
                                 <core-user-avatar slot="start" [user]="request" [linkProfile]="false"></core-user-avatar>
                                 <ion-label>
                                     <core-format-text [text]="request.fullname" contextLevel="system" [contextInstanceId]="0">
diff --git a/src/addons/messages/pages/discussions-35/discussions.html b/src/addons/messages/pages/discussions-35/discussions.html
index bb3368ca3..a95d142d8 100644
--- a/src/addons/messages/pages/discussions-35/discussions.html
+++ b/src/addons/messages/pages/discussions-35/discussions.html
@@ -28,7 +28,7 @@
             <ion-list class="ion-no-margin">
 
                 <ion-item class="ion-text-wrap addon-message-discussion" (click)="gotoContacts()"
-                    [attr.aria-label]="'addon.messages.contacts' | translate" detail="true" button>
+                    [attr.aria-label]="'addon.messages.contacts' | translate" [detail]="true" button>
                     <ion-icon name="fas-address-book" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label>
                         <p class="item-heading">{{ 'addon.messages.contacts' | translate }}</p>
@@ -46,7 +46,7 @@
                     </ion-item-divider>
                     <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let result of search.results" button
                         [attr.aria-label]="result.fullname" (click)="gotoDiscussion(result.userid, result.messageid)"
-                        [attr.aria-current]="result.userid == discussionUserId ? 'page' : 'false'" detail="false">
+                        [attr.aria-current]="result.userid == discussionUserId ? 'page' : 'false'" [detail]="false">
                         <core-user-avatar [user]="result" slot="start" [checkOnline]="result.showonlinestatus"></core-user-avatar>
                         <ion-label>
                             <p class="item-heading">{{ result.fullname }}</p>
@@ -60,7 +60,7 @@
                 <ng-container *ngIf="!search.showResults">
                     <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let discussion of discussions" button
                         [attr.aria-label]="discussion.fullname" (click)="gotoDiscussion(discussion.message!.user)"
-                        [attr.aria-current]="discussion.message!.user == discussionUserId ? 'page' : 'false'" detail="false">
+                        [attr.aria-current]="discussion.message!.user == discussionUserId ? 'page' : 'false'" [detail]="false">
                         <core-user-avatar [user]="discussion" slot="start" checkOnline="false"></core-user-avatar>
                         <ion-label>
                             <div class="flex-row ion-justify-content-between">
diff --git a/src/addons/messages/pages/group-conversations/group-conversations.html b/src/addons/messages/pages/group-conversations/group-conversations.html
index 9cca75e2d..eb9e0fdd7 100644
--- a/src/addons/messages/pages/group-conversations/group-conversations.html
+++ b/src/addons/messages/pages/group-conversations/group-conversations.html
@@ -27,7 +27,7 @@
 
         <core-loading [hideUntil]="loaded" [message]="loadingMessage">
             <ion-list>
-                <ion-item class="ion-text-wrap addon-message-discussion" (click)="gotoContacts()" detail="true" button>
+                <ion-item class="ion-text-wrap addon-message-discussion" (click)="gotoContacts()" [detail]="true" button>
                     <ion-icon name="fas-address-book" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label>
                         <h2>{{ 'addon.messages.contacts' | translate }}</h2>
@@ -38,10 +38,10 @@
                     </span>
                 </ion-item>
                 <!-- Favourite conversations. -->
-                <ion-item button class="ion-text-wrap divider" (click)="toggle(favourites)" sticky="true"
+                <ion-item button class="ion-text-wrap divider" (click)="toggle(favourites)"
                     [attr.aria-label]="(favourites.expanded ? 'core.collapse' : 'core.expand') | translate"
                     [attr.aria-expanded]="favourites.expanded" aria-controls="addon-messages-groupconversations-favourite" role="heading"
-                    detail="false">
+                    [detail]="false">
                     <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
                         [class.expandable-status-icon-expanded]="favourites.expanded">
                     </ion-icon>
@@ -73,9 +73,9 @@
                 </ion-item>
 
                 <!-- Group conversations. -->
-                <ion-item button class="divider ion-text-wrap" (click)="toggle(group)" sticky="true"
+                <ion-item button class="divider ion-text-wrap" (click)="toggle(group)"
                     [attr.aria-label]="(group.expanded ? 'core.collapse' : 'core.expand') | translate" [attr.aria-expanded]="group.expanded"
-                    aria-controls="addon-messages-groupconversations-group" role="heading" detail="false">
+                    aria-controls="addon-messages-groupconversations-group" role="heading" [detail]="false">
                     <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
                         [class.expandable-status-icon-expanded]="group.expanded">
                     </ion-icon>
@@ -106,10 +106,10 @@
                     </ion-label>
                 </ion-item>
 
-                <ion-item button class="divider ion-text-wrap" (click)="toggle(individual)" sticky="true"
+                <ion-item button class="divider ion-text-wrap" (click)="toggle(individual)"
                     [attr.aria-label]="(individual.expanded ? 'core.collapse' : 'core.expand') | translate"
                     [attr.aria-expanded]="individual.expanded" aria-controls="addon-messages-groupconversations-individual" role="heading"
-                    detail="false">
+                    [detail]="false">
                     <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
                         [class.expandable-status-icon-expanded]="individual.expanded">
                     </ion-icon>
@@ -147,7 +147,7 @@
 
 <!-- Template to render a list of conversations. -->
 <ng-template #conversationsTemplate let-conversations="conversations">
-    <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let conversation of conversations" button detail="false"
+    <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let conversation of conversations" button [detail]="false"
         (click)="gotoConversation(conversation.id, conversation.userid)"
         [attr.aria-current]="((conversation.id &&
             conversation.id == selectedConversationId) || (conversation.userid && conversation.userid == selectedUserId)) ? 'page': 'false'"
diff --git a/src/addons/messages/pages/search/search.html b/src/addons/messages/pages/search/search.html
index f55f879bd..72cc82dfe 100644
--- a/src/addons/messages/pages/search/search.html
+++ b/src/addons/messages/pages/search/search.html
@@ -45,7 +45,7 @@
 
         <!-- List of results -->
         <ion-item class="addon-message-discussion ion-text-wrap" *ngFor="let result of item.results" [attr.aria-label]="result.fullname"
-            (click)="openConversation(result)" [attr.aria-current]="result == selectedResult ? 'page' : 'false'" detail="true" button>
+            (click)="openConversation(result)" [attr.aria-current]="result == selectedResult ? 'page' : 'false'" [detail]="true" button>
             <core-user-avatar slot="start" [user]="result" [checkOnline]="true" [linkProfile]="false"></core-user-avatar>
             <ion-label>
                 <p class="item-heading">
diff --git a/src/addons/mod/assign/components/index/addon-mod-assign-index.html b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
index e7e04b991..3f65bb593 100644
--- a/src/addons/mod/assign/components/index/addon-mod-assign-index.html
+++ b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
@@ -46,7 +46,8 @@
             </ion-item>
 
             <!-- Summary of all submissions. -->
-            <ion-item class="ion-text-wrap" *ngIf="summary && summary.participantcount" (click)="goToSubmissionList()" detail="true" button>
+            <ion-item class="ion-text-wrap" *ngIf="summary && summary.participantcount" (click)="goToSubmissionList()" [detail]="true"
+                button>
                 <ion-label>
                     <p class="item-heading" *ngIf="assign.teamsubmission">{{ 'addon.mod_assign.numberofteams' | translate }}</p>
                     <p class="item-heading" *ngIf="!assign.teamsubmission">{{ 'addon.mod_assign.numberofparticipants' | translate }}</p>
diff --git a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
index ac1208cd8..475acc689 100644
--- a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
+++ b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
@@ -393,7 +393,7 @@
 
                     <!-- Data about the grader (teacher who graded). -->
                     <ion-item class="ion-text-wrap" *ngIf="grader" core-user-link [userId]="grader!.id" [courseId]="courseId"
-                        [attr.aria-label]="grader!.fullname" detail="true">
+                        [attr.aria-label]="grader!.fullname" [detail]="true">
                         <core-user-avatar [user]="grader" slot="start" [linkProfile]="false"></core-user-avatar>
                         <ion-label>
                             <p class="item-heading">{{ 'addon.mod_assign.gradedby' | translate }}</p>
diff --git a/src/addons/mod/assign/pages/submission-list/submission-list.html b/src/addons/mod/assign/pages/submission-list/submission-list.html
index 61399abfc..dfc608421 100644
--- a/src/addons/mod/assign/pages/submission-list/submission-list.html
+++ b/src/addons/mod/assign/pages/submission-list/submission-list.html
@@ -28,7 +28,7 @@
                 <!-- List of submissions. -->
                 <ng-container *ngFor="let submission of submissions.items">
                     <ion-item class="ion-text-wrap" (click)="submissions.select(submission)" button
-                        [attr.aria-current]="submissions.getItemAriaCurrent(submission)" detail="true">
+                        [attr.aria-current]="submissions.getItemAriaCurrent(submission)" [detail]="true">
                         <core-user-avatar [user]="submission" [linkProfile]="false" slot="start"></core-user-avatar>
                         <ion-label>
                             <p class="item-heading" *ngIf="submission.userfullname">{{submission.userfullname}}</p>
diff --git a/src/addons/mod/assign/submission/comments/component/addon-mod-assign-submission-comments.html b/src/addons/mod/assign/submission/comments/component/addon-mod-assign-submission-comments.html
index 157d9f527..912151506 100644
--- a/src/addons/mod/assign/submission/comments/component/addon-mod-assign-submission-comments.html
+++ b/src/addons/mod/assign/submission/comments/component/addon-mod-assign-submission-comments.html
@@ -1,4 +1,4 @@
-<ion-item *ngIf="commentsEnabled" class="ion-text-wrap" (click)="showComments($event)" detail="true" button>
+<ion-item *ngIf="commentsEnabled" class="ion-text-wrap" (click)="showComments($event)" [detail]="true" button>
     <ion-label>
         <h2>{{plugin.name}}</h2>
         <core-comments contextLevel="module" [instanceId]="assign.cmid" component="assignsubmission_comments" [itemId]="submission.id"
diff --git a/src/addons/mod/assign/submission/file/component/addon-mod-assign-submission-file.html b/src/addons/mod/assign/submission/file/component/addon-mod-assign-submission-file.html
index 316e4df80..9dff2e4d5 100644
--- a/src/addons/mod/assign/submission/file/component/addon-mod-assign-submission-file.html
+++ b/src/addons/mod/assign/submission/file/component/addon-mod-assign-submission-file.html
@@ -10,7 +10,7 @@
 
 <!-- Edit -->
 <div *ngIf="edit">
-    <ion-item-divider class="ion-text-wrap" sticky="true">
+    <ion-item-divider class="ion-text-wrap" [sticky]="true">
         <ion-label>
             <h2>{{ plugin.name }}</h2>
         </ion-label>
diff --git a/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html b/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
index 43f6b2009..b417a1286 100644
--- a/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
+++ b/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
@@ -13,7 +13,7 @@
 
 <!-- Edit -->
 <div *ngIf="edit && loaded">
-    <ion-item-divider class="ion-text-wrap" sticky="true">
+    <ion-item-divider class="ion-text-wrap" [sticky]="true">
         <ion-label>
             <h2>{{ plugin.name }}</h2>
         </ion-label>
diff --git a/src/addons/mod/bigbluebuttonbn/components/index/index.html b/src/addons/mod/bigbluebuttonbn/components/index/index.html
index 0b2dccaf4..bb1d82c25 100644
--- a/src/addons/mod/bigbluebuttonbn/components/index/index.html
+++ b/src/addons/mod/bigbluebuttonbn/components/index/index.html
@@ -92,7 +92,7 @@
         </ion-item>
         <ng-container *ngFor="let recording of recordings">
             <ion-item button class="addon-mod_bbb-recording-title" [attr.aria-expanded]="recording.expanded" (click)="toggle(recording)"
-                [attr.aria-label]="(recording.expanded ? 'core.collapse' : 'core.expand') | translate" detail="false">
+                [attr.aria-label]="(recording.expanded ? 'core.collapse' : 'core.expand') | translate" [detail]="false">
                 <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
                     [class.expandable-status-icon-expanded]="recording.expanded">
                 </ion-icon>
@@ -108,7 +108,7 @@
                             <p class="item-heading">{{ recording.playbackLabel }}</p>
                         </ion-label>
                     </ion-item>
-                    <ion-item *ngFor="let playback of recording.playbacks" button (click)="openPlayback($event, playback)" detail="false"
+                    <ion-item *ngFor="let playback of recording.playbacks" button (click)="openPlayback($event, playback)" [detail]="false"
                         class="ion-text-wrap addon-mod_bbb-recording-playback-item">
                         <ion-label>
                             <p>{{ playback.name }}</p>
diff --git a/src/addons/mod/book/components/index/addon-mod-book-index.html b/src/addons/mod/book/components/index/addon-mod-book-index.html
index 89b4c085b..4d62979c4 100644
--- a/src/addons/mod/book/components/index/addon-mod-book-index.html
+++ b/src/addons/mod/book/components/index/addon-mod-book-index.html
@@ -20,7 +20,7 @@
             </ion-label>
         </ion-item>
 
-        <ion-item class="ion-text-wrap" *ngFor="let chapter of chapters" [class.item-dimmed]="chapter.hidden" button detail="true"
+        <ion-item class="ion-text-wrap" *ngFor="let chapter of chapters" [class.item-dimmed]="chapter.hidden" button [detail]="true"
             (click)="openBook(chapter.id)">
             <ion-label>
                 <p [class.ion-padding-start]="addPadding && chapter.level == 1 ? true : null">
diff --git a/src/addons/mod/book/components/toc/toc.html b/src/addons/mod/book/components/toc/toc.html
index 7d63bbfea..f633ab0ff 100644
--- a/src/addons/mod/book/components/toc/toc.html
+++ b/src/addons/mod/book/components/toc/toc.html
@@ -14,7 +14,7 @@
     <nav>
         <ion-list>
             <ion-item class="ion-text-wrap" *ngFor="let chapter of chapters" (click)="loadChapter(chapter.id)"
-                [attr.aria-current]="selected == chapter.id ? 'page' : 'false'" button [class.item-dimmed]="chapter.hidden" detail="false">
+                [attr.aria-current]="selected == chapter.id ? 'page' : 'false'" button [class.item-dimmed]="chapter.hidden" [detail]="false">
                 <ion-label>
                     <p [class.ion-padding-start]="addPadding && chapter.level == 1 ? true : null" class="item-heading">
                         <span *ngIf="showNumbers" class="addon-mod-book-number">{{chapter.indexNumber}} </span>
diff --git a/src/addons/mod/choice/components/index/addon-mod-choice-index.html b/src/addons/mod/choice/components/index/addon-mod-choice-index.html
index a7279c118..08e56bc8a 100644
--- a/src/addons/mod/choice/components/index/addon-mod-choice-index.html
+++ b/src/addons/mod/choice/components/index/addon-mod-choice-index.html
@@ -89,7 +89,7 @@
                 <ion-col *ngIf="choice.publish && results" size="12" size-lg="7">
                     <ion-item-group *ngFor="let result of results">
                         <ion-item [button]="result.numberofuser > 0" class="divider ion-text-wrap" (click)="toggle(result)"
-                            [attr.aria-label]="(result.expanded ? 'core.collapse' : 'core.expand') | translate" detail="false">
+                            [attr.aria-label]="(result.expanded ? 'core.collapse' : 'core.expand') | translate" [detail]="false">
                             <ion-icon [name]="result.numberofuser > 0 ? 'fas-chevron-right' : ''" flip-rtl slot="start" aria-hidden="true"
                                 class="expandable-status-icon" [class.expandable-status-icon-expanded]="result.expanded">
                             </ion-icon>
diff --git a/src/addons/mod/data/components/actionsmenu/actionsmenu.html b/src/addons/mod/data/components/actionsmenu/actionsmenu.html
index 242b68f1c..eadbe7c6a 100644
--- a/src/addons/mod/data/components/actionsmenu/actionsmenu.html
+++ b/src/addons/mod/data/components/actionsmenu/actionsmenu.html
@@ -1,6 +1,6 @@
 <ion-content>
     <ion-list>
-        <ion-item button class="ion-text-wrap" (click)="onItemClick(item)" *ngFor="let item of items" detail="false"
+        <ion-item button class="ion-text-wrap" (click)="onItemClick(item)" *ngFor="let item of items" [detail]="false"
             [attr.aria-label]="item.text | translate">
             <ion-label>
                 <p class="item-heading">{{ item.text | translate }}</p>
diff --git a/src/addons/mod/data/components/index/addon-mod-data-index.html b/src/addons/mod/data/components/index/addon-mod-data-index.html
index f4c96dc7c..841034633 100644
--- a/src/addons/mod/data/components/index/addon-mod-data-index.html
+++ b/src/addons/mod/data/components/index/addon-mod-data-index.html
@@ -63,14 +63,14 @@
 
     <!-- Reset search. -->
     <ng-container *ngIf="search.searching && !isEmpty">
-        <ion-item (click)="searchReset($event)" button detail="false" *ngIf="!foundRecordsTranslationData">
+        <ion-item (click)="searchReset($event)" button [detail]="false" *ngIf="!foundRecordsTranslationData">
             <ion-label color="info">
                 {{ 'addon.mod_data.resetsettings' | translate}}
             </ion-label>
         </ion-item>
 
         <ion-card class="core-success-card" *ngIf="foundRecordsTranslationData">
-            <ion-item (click)="searchReset($event)" button detail="false">
+            <ion-item (click)="searchReset($event)" button [detail]="false">
                 <ion-label>
                     <p [innerHTML]="'addon.mod_data.foundrecords' | translate:{$a: foundRecordsTranslationData}"></p>
                 </ion-label>
diff --git a/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html b/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
index 3396a80d2..fbe9ce761 100644
--- a/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
+++ b/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
@@ -75,7 +75,7 @@
                 </span>
             </ion-badge>
         </ion-item>
-        <ion-item class="ion-text-wrap" *ngIf="!access.isanonymous && access.canviewreports" (click)="openNonRespondents()" detail="true"
+        <ion-item class="ion-text-wrap" *ngIf="!access.isanonymous && access.canviewreports" (click)="openNonRespondents()" [detail]="true"
             button>
             <ion-label>
                 <p class="item-heading">{{ 'addon.mod_feedback.show_nonrespondents' | translate }}</p>
diff --git a/src/addons/mod/feedback/pages/attempts/attempts.html b/src/addons/mod/feedback/pages/attempts/attempts.html
index 0c97936e9..39cec4859 100644
--- a/src/addons/mod/feedback/pages/attempts/attempts.html
+++ b/src/addons/mod/feedback/pages/attempts/attempts.html
@@ -25,7 +25,7 @@
                             <h2>{{ 'addon.mod_feedback.non_anonymous_entries' | translate : {$a: identifiableAttemptsTotal } }}</h2>
                         </ion-label>
                     </ion-item-divider>
-                    <ion-item *ngFor="let attempt of identifiableAttempts" class="ion-text-wrap" button detail="true"
+                    <ion-item *ngFor="let attempt of identifiableAttempts" class="ion-text-wrap" button [detail]="true"
                         (click)="attempts?.select(attempt)" [attr.aria-current]="attempts?.getItemAriaCurrent(attempt)">
                         <core-user-avatar [user]="attempt" [linkProfile]="false" slot="start"></core-user-avatar>
                         <ion-label>
@@ -41,7 +41,7 @@
                             <h2>{{ 'addon.mod_feedback.anonymous_entries' | translate : {$a: anonymousAttemptsTotal } }}</h2>
                         </ion-label>
                     </ion-item-divider>
-                    <ion-item *ngFor="let attempt of anonymousAttempts" class="ion-text-wrap" button detail="true"
+                    <ion-item *ngFor="let attempt of anonymousAttempts" class="ion-text-wrap" button [detail]="true"
                         (click)="attempts?.select(attempt)" [attr.aria-current]="attempts?.getItemAriaCurrent(attempt)">
                         <core-user-avatar [linkProfile]="false" slot="start"></core-user-avatar>
                         <ion-label>
diff --git a/src/addons/mod/folder/components/index/addon-mod-folder-index.html b/src/addons/mod/folder/components/index/addon-mod-folder-index.html
index 3d3d643ed..a39505780 100644
--- a/src/addons/mod/folder/components/index/addon-mod-folder-index.html
+++ b/src/addons/mod/folder/components/index/addon-mod-folder-index.html
@@ -15,7 +15,7 @@
 
     <ion-list *ngIf="contents && (contents.files.length + contents.folders.length > 0)">
         <ng-container *ngFor="let folder of contents.folders">
-            <ion-item class="ion-text-wrap item-file item-directory" (click)="openFolder(folder)" detail="true" button>
+            <ion-item class="ion-text-wrap item-file item-directory" (click)="openFolder(folder)" [detail]="true" button>
                 <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.folder' | translate"></ion-icon>
                 <ion-label>
                     <p class="item-heading">{{folder.filename}}</p>
diff --git a/src/addons/mod/forum/components/discussion-options-menu/discussion-options-menu.html b/src/addons/mod/forum/components/discussion-options-menu/discussion-options-menu.html
index 4736dcd70..e5ef8a551 100644
--- a/src/addons/mod/forum/components/discussion-options-menu/discussion-options-menu.html
+++ b/src/addons/mod/forum/components/discussion-options-menu/discussion-options-menu.html
@@ -1,38 +1,38 @@
 <ion-content>
     <ion-list>
-        <ion-item button class="ion-text-wrap" (click)="setLockState(true)" *ngIf="discussion.canlock && !discussion.locked" detail="false">
+        <ion-item button class="ion-text-wrap" (click)="setLockState(true)" *ngIf="discussion.canlock && !discussion.locked" [detail]="false">
             <ion-icon name="fas-lock" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <p class="item-heading">{{ 'addon.mod_forum.lockdiscussion' | translate }}</p>
             </ion-label>
         </ion-item>
-        <ion-item button class="ion-text-wrap" (click)="setLockState(false)" *ngIf="discussion.canlock && discussion.locked" detail="false">
+        <ion-item button class="ion-text-wrap" (click)="setLockState(false)" *ngIf="discussion.canlock && discussion.locked" [detail]="false">
             <ion-icon name="fas-unlock" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <p class="item-heading">{{ 'addon.mod_forum.unlockdiscussion' | translate }}</p>
             </ion-label>
         </ion-item>
-        <ion-item button class="ion-text-wrap" (click)="setPinState(true)" *ngIf="canPin && !discussion.pinned" detail="false">
+        <ion-item button class="ion-text-wrap" (click)="setPinState(true)" *ngIf="canPin && !discussion.pinned" [detail]="false">
             <ion-icon name="fas-map-pin" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <p class="item-heading">{{ 'addon.mod_forum.pindiscussion' | translate }}</p>
             </ion-label>
         </ion-item>
-        <ion-item button class="ion-text-wrap" (click)="setPinState(false)" *ngIf="canPin && discussion.pinned" detail="false">
+        <ion-item button class="ion-text-wrap" (click)="setPinState(false)" *ngIf="canPin && discussion.pinned" [detail]="false">
             <ion-icon name="fas-map-pin" slot="start" class="icon-slash" aria-hidden="true"></ion-icon>
             <ion-label>
                 <p class="item-heading">{{ 'addon.mod_forum.unpindiscussion' | translate }}</p>
             </ion-label>
         </ion-item>
         <ion-item button class="ion-text-wrap" (click)="toggleFavouriteState(true)" *ngIf="discussion.canfavourite && !discussion.starred"
-            detail="false">
+            [detail]="false">
             <ion-icon name="fas-star" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <p class="item-heading">{{ 'addon.mod_forum.addtofavourites' | translate }}</p>
             </ion-label>
         </ion-item>
         <ion-item button class="ion-text-wrap" (click)="toggleFavouriteState(false)" *ngIf="discussion.canfavourite && discussion.starred"
-            detail="false">
+            [detail]="false">
             <ion-icon name="fas-star" slot="start" class="icon-slash" aria-hidden="true"></ion-icon>
             <ion-label>
                 <p class="item-heading">{{ 'addon.mod_forum.removefromfavourites' | translate }}</p>
diff --git a/src/addons/mod/forum/components/index/index.html b/src/addons/mod/forum/components/index/index.html
index 6e926f3a1..46e3f57ee 100644
--- a/src/addons/mod/forum/components/index/index.html
+++ b/src/addons/mod/forum/components/index/index.html
@@ -76,7 +76,7 @@
                 <p>{{ 'addon.mod_forum.errorloadingsortingorderdetails' | translate }}</p>
             </core-empty-box>
 
-            <ion-item *ngFor="let discussion of discussionsItems" class="addon-mod-forum-discussion" detail="true"
+            <ion-item *ngFor="let discussion of discussionsItems" class="addon-mod-forum-discussion" [detail]="true"
                 [lines]="discussion.groupname && 'none'" [attr.aria-current]="discussions?.getItemAriaCurrent(discussion)"
                 (click)="discussions?.select(discussion)" button>
                 <ion-label>
diff --git a/src/addons/mod/forum/components/post-options-menu/post-options-menu.html b/src/addons/mod/forum/components/post-options-menu/post-options-menu.html
index c4362e55f..dcf9398b7 100644
--- a/src/addons/mod/forum/components/post-options-menu/post-options-menu.html
+++ b/src/addons/mod/forum/components/post-options-menu/post-options-menu.html
@@ -1,20 +1,20 @@
 <ion-content>
     <core-loading [hideUntil]="loaded" [fullscreen]="false">
         <ion-list>
-            <ion-item button class="ion-text-wrap" (click)="editPost()" *ngIf="offlinePost || canEdit" detail="false">
+            <ion-item button class="ion-text-wrap" (click)="editPost()" *ngIf="offlinePost || canEdit" [detail]="false">
                 <ion-icon name="fas-pen" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>
                     <p class="item-heading">{{ 'addon.mod_forum.edit' | translate }}</p>
                 </ion-label>
             </ion-item>
-            <ion-item button class="ion-text-wrap" (click)="deletePost()" *ngIf="offlinePost || canDelete" detail="false">
+            <ion-item button class="ion-text-wrap" (click)="deletePost()" *ngIf="offlinePost || canDelete" [detail]="false">
                 <ion-icon name="fas-trash" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>
                     <p class="item-heading" *ngIf="!offlinePost">{{ 'addon.mod_forum.delete' | translate }}</p>
                     <p class="item-heading" *ngIf="offlinePost">{{ 'core.discard' | translate }}</p>
                 </ion-label>
             </ion-item>
-            <ion-item class="ion-text-wrap" [href]="url" *ngIf="url" core-link capture="false" button detail="false"
+            <ion-item class="ion-text-wrap" [href]="url" *ngIf="url" core-link capture="false" button [detail]="false"
                 [showBrowserWarning]="false">
                 <ion-icon name="fas-up-right-from-square" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>
diff --git a/src/addons/mod/forum/components/post/post.html b/src/addons/mod/forum/components/post/post.html
index df950ecdd..db3f5fb5d 100644
--- a/src/addons/mod/forum/components/post/post.html
+++ b/src/addons/mod/forum/components/post/post.html
@@ -123,7 +123,7 @@
             <ion-checkbox slot="end" [(ngModel)]="formData.isprivatereply" name="isprivatereply"></ion-checkbox>
         </ion-item>
         <ng-container *ngIf="forum.id && forum.maxattachments > 0">
-            <ion-item button class="divider ion-text-wrap" (click)="toggleAdvanced()" detail="false" [attr.aria-expanded]="advanced"
+            <ion-item button class="divider ion-text-wrap" (click)="toggleAdvanced()" [detail]="false" [attr.aria-expanded]="advanced"
                 [attr.aria-controls]="'addon-forum-reply-edit-form-advanced-' + uniqueId"
                 [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate">
                 <ion-icon *ngIf="!advanced" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
diff --git a/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html b/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html
index 6c8aa3b07..5405829dd 100644
--- a/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html
+++ b/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html
@@ -13,7 +13,7 @@
 <ion-content>
     <ion-list id="addon-mod-forum-sort-selector" role="listbox" aria-labelledby="addon-mod-forum-sort-order-label">
         <ng-container *ngFor="let sortOrder of sortOrders">
-            <ion-item class="ion-text-wrap" detail="false" role="combobox"
+            <ion-item class="ion-text-wrap" [detail]="false" role="combobox"
                 [attr.aria-current]="selected == sortOrder.value ? 'page' : 'false'" [attr.aria-label]="sortOrder.label | translate"
                 (click)="selectSortOrder(sortOrder)" button aria-haspopup="dialog">
                 <ion-label>
diff --git a/src/addons/mod/forum/pages/new-discussion/new-discussion.html b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
index ba0d4359d..e13a19bf9 100644
--- a/src/addons/mod/forum/pages/new-discussion/new-discussion.html
+++ b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
@@ -31,7 +31,7 @@
                     (contentChanged)="onMessageChange($event)">
                 </core-rich-text-editor>
             </ion-item>
-            <ion-item button class="divider ion-text-wrap" (click)="toggleAdvanced()" detail="false" [attr.aria-expanded]="advanced"
+            <ion-item button class="divider ion-text-wrap" (click)="toggleAdvanced()" [detail]="false" [attr.aria-expanded]="advanced"
                 [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate" role="heading"
                 aria-controls="addon-mod-forum-new-discussion-advanced">
                 <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
diff --git a/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html b/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
index 9da82ceb1..ce3e456d5 100644
--- a/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
+++ b/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
@@ -37,7 +37,7 @@
                     <h2 class="big">{{ 'addon.mod_glossary.entriestobesynced' | translate }}</h2>
                 </ion-label>
             </ion-item-divider>
-            <ion-item *ngFor="let entry of entries.offlineEntries" (click)="entries.select(entry)" button detail="false"
+            <ion-item *ngFor="let entry of entries.offlineEntries" (click)="entries.select(entry)" button [detail]="false"
                 [attr.aria-current]="entries.getItemAriaCurrent(entry)">
                 <ion-label>
                     <div class="addon-mod-glossary-index--offline-entry">
@@ -58,7 +58,7 @@
                     </ion-label>
                 </ion-item-divider>
 
-                <ion-item button (click)="entries.select(entry)" [attr.aria-current]="entries.getItemAriaCurrent(entry)" detail="false">
+                <ion-item button (click)="entries.select(entry)" [attr.aria-current]="entries.getItemAriaCurrent(entry)" [detail]="false">
                     <ion-label>
                         <core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="glossary!.coursemodule"
                             [courseId]="courseId">
diff --git a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
index b174ad52c..2570a5a1a 100644
--- a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
+++ b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
@@ -19,7 +19,7 @@
     <core-loading [hideUntil]="loaded">
         <!-- User viewed. -->
         <ion-item class="ion-text-wrap" *ngIf="user && !isCurrentUser" core-user-link [userId]="user.id" [courseId]="courseId"
-            [attr.aria-label]="user.fullname" button detail="true">
+            [attr.aria-label]="user.fullname" button [detail]="true">
             <core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false"></core-user-avatar>
             <ion-label>
                 <h2>{{ user.fullname }}</h2>
@@ -65,7 +65,7 @@
 <!-- Template to render a list of conversations. -->
 <ng-template #attemptsTemplate let-attempts="attempts">
     <!-- "Header" of the table -->
-    <ion-item class="addon-mod_h5pactivity-table-header hide-detail" detail="true">
+    <ion-item class="addon-mod_h5pactivity-table-header hide-detail" [detail]="true">
         <ion-label>
             <ion-row class="ion-align-items-center">
                 <ion-col class="ion-text-center">#</ion-col>
@@ -80,7 +80,7 @@
     </ion-item>
 
     <!-- List of attempts. -->
-    <ion-item class="ion-text-wrap addon-mod_h5pactivity-table-row" *ngFor="let attempt of attempts" button detail="true"
+    <ion-item class="ion-text-wrap addon-mod_h5pactivity-table-row" *ngFor="let attempt of attempts" button [detail]="true"
         [attr.aria-label]="'addon.mod_h5pactivity.viewattempt' | translate:{$a: attempt.attempt}" (click)="openAttempt(attempt)">
 
         <ion-label>
diff --git a/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.html b/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.html
index 2610c501e..8d3118bf5 100644
--- a/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.html
+++ b/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.html
@@ -19,7 +19,7 @@
     <core-loading [hideUntil]="loaded">
         <ion-list *ngIf="users.length">
             <!-- "Header" of the table -->
-            <ion-item class="addon-mod_h5pactivity-table-header hide-detail font-bold" detail="true">
+            <ion-item class="addon-mod_h5pactivity-table-header hide-detail font-bold" [detail]="true">
                 <ion-label>
                     <ion-row class="ion-align-items-center">
                         <ion-col class="ion-text-center" size="4">{{ 'core.user' | translate }}</ion-col>
@@ -31,7 +31,7 @@
             </ion-item>
 
             <!-- List of users. -->
-            <ion-item class="ion-text-wrap addon-mod_h5pactivity-table-row" *ngFor="let user of users" detail="true"
+            <ion-item class="ion-text-wrap addon-mod_h5pactivity-table-row" *ngFor="let user of users" [detail]="true"
                 [attr.aria-label]="'addon.mod_h5pactivity.review_user_attempts' | translate:{$a: user.attempts.length}"
                 (click)="openUser(user)" [class.hide-detail]="!user.attempts.length" [button]="user.attempts.length > 0">
 
diff --git a/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html b/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
index ba70af882..f483981b8 100644
--- a/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
+++ b/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
@@ -20,7 +20,7 @@
             </ion-label>
         </ion-item>
 
-        <ion-item class="ion-text-wrap" *ngFor="let item of items" (click)="openImscp(item.href)" button detail="true">
+        <ion-item class="ion-text-wrap" *ngFor="let item of items" (click)="openImscp(item.href)" button [detail]="true">
             <ion-label [class.core-bold]="!item.href">
                 <p>
                     <span class="ion-padding-start" *ngFor="let i of getNumberForPadding(item.level)"></span>
diff --git a/src/addons/mod/imscp/components/toc/toc.html b/src/addons/mod/imscp/components/toc/toc.html
index a8400e7ba..8b69fcc77 100644
--- a/src/addons/mod/imscp/components/toc/toc.html
+++ b/src/addons/mod/imscp/components/toc/toc.html
@@ -14,7 +14,7 @@
     <nav>
         <ion-list>
             <ion-item *ngFor="let item of items" (click)="loadItem(item.href)"
-                [attr.aria-current]="selected == item.href ? 'page' : 'false'" button detail="false">
+                [attr.aria-current]="selected == item.href ? 'page' : 'false'" button [detail]="false">
                 <ion-label [class.core-bold]="!item.href">
                     <p class="item-heading">
                         <span class="ion-padding-start" *ngFor="let i of getNumberForPadding(item.level)"></span>
diff --git a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
index 4b4a24ab7..a0eee6120 100644
--- a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
+++ b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
@@ -184,7 +184,7 @@
                         </ion-card-header>
 
                         <ion-item class="ion-text-wrap" *ngFor="let student of overview.students" button (click)="openRetake(student.id)"
-                            detail="true">
+                            [detail]="true">
                             <core-user-avatar [user]="student" slot="start" [userId]="student.id" [courseId]="courseId">
                             </core-user-avatar>
                             <ion-label>
diff --git a/src/addons/mod/lesson/components/menu-modal/menu-modal.html b/src/addons/mod/lesson/components/menu-modal/menu-modal.html
index 541e03064..bbdd4f623 100644
--- a/src/addons/mod/lesson/components/menu-modal/menu-modal.html
+++ b/src/addons/mod/lesson/components/menu-modal/menu-modal.html
@@ -41,7 +41,7 @@
                     <ng-container *ngFor="let page of pageInstance.lessonPages">
                         <ion-item class="ion-text-wrap" *ngIf="page.display && page.displayinmenublock" (click)="loadPage(page.id)"
                             [attr.aria-current]="!pageInstance.eolData && pageInstance.currentPage == page.id ? 'page' : 'false'" button
-                            detail="true">
+                            [detail]="true">
                             <ion-label>
                                 <core-format-text [text]="page.title" contextLevel="module" [courseId]="pageInstance.courseId"
                                     [contextInstanceId]="pageInstance.lesson?.coursemodule">
diff --git a/src/addons/mod/lesson/pages/player/player.html b/src/addons/mod/lesson/pages/player/player.html
index a351a1109..88d8a8784 100644
--- a/src/addons/mod/lesson/pages/player/player.html
+++ b/src/addons/mod/lesson/pages/player/player.html
@@ -5,7 +5,7 @@
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId">
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
                 </core-format-text>
             </h1>
         </ion-title>
diff --git a/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html b/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
index 44e52cd5f..a484ac79e 100644
--- a/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
+++ b/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
@@ -74,7 +74,7 @@
             </ion-item>
             <div role="rowgroup">
                 <!-- List of attempts. -->
-                <ion-item button detail="true" *ngFor="let attempt of attempts" class="ion-text-wrap"
+                <ion-item button [detail]="true" *ngFor="let attempt of attempts" class="ion-text-wrap"
                     [ngClass]='{"addon-mod_quiz-highlighted": attempt.highlightGrade}' [attr.aria-label]="'core.seemoredetail' | translate"
                     (click)="viewAttempt(attempt.id)">
                     <ion-label>
diff --git a/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html b/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
index 43d093486..9ed8232ff 100644
--- a/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
+++ b/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
@@ -15,7 +15,7 @@
         <ion-list>
             <ion-item button class="ion-text-wrap {{question.stateClass}}" *ngFor="let question of navigation"
                 [attr.aria-current]="!summaryShown && currentPage == question.page ? 'page' : 'false'"
-                (click)="loadPage(question.page, question.slot)" detail="false">
+                (click)="loadPage(question.page, question.slot)" [detail]="false">
 
                 <ion-label class="ion-text-wrap">
                     <span *ngIf="question.type !== 'description' && question.questionnumber">
diff --git a/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html b/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
index 63640e0e2..60b137cb0 100644
--- a/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
+++ b/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
@@ -45,7 +45,7 @@
                         <p slot="end">{{ numAttempts }}</p>
                     </ion-item>
                     <ion-item *ngIf="onlineAttempts.length > 0" button class="divider ion-text-wrap" (click)="toggleGrades()"
-                        [attr.aria-label]="(gradesExpanded ? 'core.collapse' : 'core.expand') | translate" detail="false">
+                        [attr.aria-label]="(gradesExpanded ? 'core.collapse' : 'core.expand') | translate" [detail]="false">
                         <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
                             [class.expandable-status-icon-expanded]="gradesExpanded">
                         </ion-icon>
diff --git a/src/addons/mod/wiki/components/map/map.html b/src/addons/mod/wiki/components/map/map.html
index e51ddedad..0008a4d31 100644
--- a/src/addons/mod/wiki/components/map/map.html
+++ b/src/addons/mod/wiki/components/map/map.html
@@ -14,7 +14,7 @@
     <nav>
         <ion-list>
             <!-- Go to "home". -->
-            <ion-item class="ion-text-wrap" *ngIf="homeView" (click)="goToWikiHome()" button detail="true">
+            <ion-item class="ion-text-wrap" *ngIf="homeView" (click)="goToWikiHome()" button [detail]="true">
                 <ion-icon name="fas-house" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>{{ 'addon.mod_wiki.gowikihome' | translate }}</ion-label>
             </ion-item>
@@ -25,7 +25,7 @@
                     </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngFor="let page of letter.pages" (click)="goToPage(page)"
-                    [attr.aria-current]="selectedTitle == page.title ? 'page' : 'false'" button detail="false">
+                    [attr.aria-current]="selectedTitle == page.title ? 'page' : 'false'" button [detail]="false">
                     <ion-icon name="fas-house" slot="start" *ngIf="page.firstpage" aria-hidden="true"></ion-icon>
                     <ion-label>
                         <core-format-text [text]="page.title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
diff --git a/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html b/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
index 4844903d8..42034ae8f 100644
--- a/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
+++ b/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
@@ -9,7 +9,7 @@
                 </ion-label>
             </ion-item-divider>
             <ion-item class="ion-text-wrap" *ngFor="let subwiki of group.subwikis" (click)="openSubwiki(subwiki)" button
-                [attr.aria-current]="isSubwikiSelected(subwiki) ? 'page' : 'false'" detail="false">
+                [attr.aria-current]="isSubwikiSelected(subwiki) ? 'page' : 'false'" [detail]="false">
                 <ion-label>
                     <core-format-text [text]="subwiki.name" contextLevel="course" [contextInstanceId]="courseId" [wsNotFiltered]="true">
                     </core-format-text>
diff --git a/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html b/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
index 18e47a08a..2ce28dfc5 100644
--- a/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
+++ b/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
@@ -14,7 +14,7 @@
     </core-course-module-info>
 
     <ion-card *ngIf="phases && workshop">
-        <ion-item button (click)="viewPhaseInfo()" detail="true">
+        <ion-item button (click)="viewPhaseInfo()" [detail]="true">
             <ion-label>
                 <h2 class="ion-text-wrap">{{ phases[workshop.phase].title }}</h2>
             </ion-label>
@@ -22,7 +22,7 @@
         <ng-container *ngIf="phases && phases[workshop.phase] && phases[workshop.phase].tasks &&
             phases[workshop.phase].tasks.length">
             <ion-item button class="ion-text-wrap" *ngFor="let task of phases[workshop.phase].tasks"
-                [class.item-dimmed]="task.code === 'submit' && !showSubmit" (click)="runTask(task)" detail="false">
+                [class.item-dimmed]="task.code === 'submit' && !showSubmit" (click)="runTask(task)" [detail]="false">
                 <ion-icon slot="start" name="far-circle" *ngIf="task.completed === null"
                     [attr.aria-label]="'addon.mod_workshop.tasktodo' | translate"></ion-icon>
                 <ion-icon slot="start" name="fas-circle-xmark" color="danger" *ngIf="task.completed === ''"
diff --git a/src/addons/mod/workshop/components/phase/phase.html b/src/addons/mod/workshop/components/phase/phase.html
index 2635a752a..12a27bef1 100644
--- a/src/addons/mod/workshop/components/phase/phase.html
+++ b/src/addons/mod/workshop/components/phase/phase.html
@@ -21,7 +21,7 @@
                     </p>
                 </ion-label>
             </ion-item-divider>
-            <ion-item class="ion-text-wrap" *ngIf="phase.switchUrl" [href]="phase.switchUrl" detail="false">
+            <ion-item class="ion-text-wrap" *ngIf="phase.switchUrl" [href]="phase.switchUrl" [detail]="false">
                 <ion-icon slot="start" name="fas-right-left" aria-hidden="true"></ion-icon>
                 <ion-label>
                     <p>{{ 'addon.mod_workshop.switchphase' + phase.code | translate }}</p>
@@ -30,7 +30,7 @@
             </ion-item>
             <ion-item class="ion-text-wrap" *ngFor="let task of phase.tasks"
                 [class.item-dimmed]="phase.code !== workshopPhase || (task.code === 'submit' && !showSubmit)" (click)="runTask(task)"
-                detail="false" button>
+                [detail]="false" button>
                 <ion-icon slot="start" name="far-circle" *ngIf="task.completed == null"
                     [attr.aria-label]="'addon.mod_workshop.tasktodo' | translate"></ion-icon>
                 <ion-icon slot="start" name="fas-circle-xmark" color="danger" *ngIf="task.completed === ''"
diff --git a/src/addons/privatefiles/pages/index/index.html b/src/addons/privatefiles/pages/index/index.html
index 8887aab00..af53f6643 100644
--- a/src/addons/privatefiles/pages/index/index.html
+++ b/src/addons/privatefiles/pages/index/index.html
@@ -37,7 +37,8 @@
         <!-- List of files. -->
         <ion-list *ngIf="files && files.length > 0">
             <ng-container *ngFor="let file of files">
-                <ion-item button *ngIf="file.isdir" class="ion-text-wrap item-file item-directory" (click)="openFolder(file)" detail="true">
+                <ion-item button *ngIf="file.isdir" class="ion-text-wrap item-file item-directory" (click)="openFolder(file)"
+                    [detail]="true">
                     <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.folder' | translate"></ion-icon>
                     <ion-label>{{file.filename}}</ion-label>
                 </ion-item>
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
index 0c90b2fb4..64caa217d 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -50,7 +50,7 @@
         <ng-container *ngFor="let section of sections">
             <ion-card class="section" *ngIf="section.modules.length > 0">
                 <ion-card-header>
-                    <ion-item [lines]="section.expanded ? 'full' : 'none'" button detail="false" (click)="toggleExpand($event, section)"
+                    <ion-item [lines]="section.expanded ? 'full' : 'none'" button [detail]="false" (click)="toggleExpand($event, section)"
                         [class.core-course-storage-section-expanded]="section.expanded"
                         [attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
                         [attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-storage-section-' + section.id">
diff --git a/src/addons/storagemanager/pages/courses-storage/courses-storage.html b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
index b7692ea14..134cc61bc 100644
--- a/src/addons/storagemanager/pages/courses-storage/courses-storage.html
+++ b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
@@ -43,7 +43,7 @@
                 </ion-button>
             </ion-item>
             <ion-item *ngFor="let course of downloadedCourses" class="course" (click)="openCourse(course.id, course.title)" button
-                detail="true">
+                [detail]="true">
                 <ion-label class="ion-text-wrap">
                     <p class="item-heading">
                         <core-format-text [text]="course.title" contextLevel="course" [contextInstanceId]="course.id" [adaptImg]="false">
diff --git a/src/core/components/context-menu/context-menu.ts b/src/core/components/context-menu/context-menu.ts
index 6102bc4b6..1f1d679da 100644
--- a/src/core/components/context-menu/context-menu.ts
+++ b/src/core/components/context-menu/context-menu.ts
@@ -31,7 +31,7 @@ import { CoreDirectivesRegistry } from '@singletons/directives-registry';
 })
 export class CoreContextMenuComponent implements OnInit, OnDestroy {
 
-    @Input() icon?: string; // Icon to be shown on the navigation bar. Default: Kebab menu icon.
+    @Input() icon = 'ellipsis-vertical'; // Icon to be shown on the navigation bar. Default: Kebab menu icon.
     @Input() title?: string; // Text to be shown on the top of the popover.
     @Input('aria-label') ariaLabel?: string; // Aria label to be shown on the top of the popover.
 
@@ -68,7 +68,6 @@ export class CoreContextMenuComponent implements OnInit, OnDestroy {
      * @inheritdoc
      */
     ngOnInit(): void {
-        this.icon = this.icon || 'ellipsis-vertical';
         this.ariaLabel = this.ariaLabel || this.title || Translate.instant('core.displayoptions');
     }
 
diff --git a/src/core/components/context-menu/core-context-menu-popover.html b/src/core/components/context-menu/core-context-menu-popover.html
index 960de7d6b..bddc16604 100644
--- a/src/core/components/context-menu/core-context-menu-popover.html
+++ b/src/core/components/context-menu/core-context-menu-popover.html
@@ -5,7 +5,7 @@
         </ion-list-header>
         <ion-item class="ion-text-wrap" *ngFor="let item of items" core-link [capture]="item.captureLink" [autoLogin]="item.autoLogin"
             [href]="item.href" (click)="itemClicked($event, item)" [attr.aria-label]="item.ariaAction" [hidden]="item.hidden"
-            [detail]="(item.href && !item.iconAction) || null" role="menuitem" [button]="(item.href && !item.iconAction)"
+            [detail]="!!(item.href && !item.iconAction)" role="menuitem" [button]="!!(item.href && !item.iconAction)"
             [showBrowserWarning]="item.showBrowserWarning">
             <ion-label>
                 <p class="item-heading">
diff --git a/src/core/components/file/core-file.html b/src/core/components/file/core-file.html
index e6e2e729d..59c82403a 100644
--- a/src/core/components/file/core-file.html
+++ b/src/core/components/file/core-file.html
@@ -1,5 +1,5 @@
 <ion-card class="card-file">
-    <ion-item *ngIf="file" button class="ion-text-wrap item-file" (click)="download($event, true)" detail="false">
+    <ion-item *ngIf="file" button class="ion-text-wrap item-file" (click)="download($event, true)" [detail]="false">
         <ion-thumbnail slot="start">
             <img [src]="fileIcon" alt="" role="presentation" />
         </ion-thumbnail>
diff --git a/src/core/components/local-file/core-local-file.html b/src/core/components/local-file/core-local-file.html
index 5814bf9c9..d3ca0cdd2 100644
--- a/src/core/components/local-file/core-local-file.html
+++ b/src/core/components/local-file/core-local-file.html
@@ -1,6 +1,6 @@
 <form (ngSubmit)="changeName(newFileName, $event)" #nameForm>
     <ion-card class="card-file">
-        <ion-item class="ion-text-wrap item-file" (click)="openFile($event)" button detail="false">
+        <ion-item class="ion-text-wrap item-file" (click)="openFile($event)" button [detail]="false">
             <ion-thumbnail slot="start">
                 <img [src]="fileIcon" [alt]="fileExtension" role="presentation" />
             </ion-thumbnail>
diff --git a/src/core/components/tabs-outlet/core-tabs-outlet.html b/src/core/components/tabs-outlet/core-tabs-outlet.html
index 8933706b0..e808fc40a 100644
--- a/src/core/components/tabs-outlet/core-tabs-outlet.html
+++ b/src/core/components/tabs-outlet/core-tabs-outlet.html
@@ -8,7 +8,7 @@
             </ion-button>
             <ion-slides [options]="slidesOpts" [dir]="direction" role="tablist" [attr.aria-label]="description">
                 <ng-container *ngFor="let tab of tabs">
-                    <ion-slide role="presentation" [id]="tab.id! + '-tab'" tabindex="-1" [class.selected]="selected == tab.id"
+                    <ion-slide *ngIf="tab.id" role="presentation" [id]="tab.id + '-tab'" tabindex="-1" [class.selected]="selected == tab.id"
                         class="{{tab.class}}">
                         <ion-tab-button (ionTabButtonClick)="selectTab(tab.id, $event)" (keydown)="tabAction.keyDown(tab.id, $event)"
                             (keyup)="tabAction.keyUp(tab.id, $event)" [tab]="tab.page" [layout]="layout" role="tab"
diff --git a/src/core/components/tabs/tab.ts b/src/core/components/tabs/tab.ts
index a93de6abc..6a9c7590b 100644
--- a/src/core/components/tabs/tab.ts
+++ b/src/core/components/tabs/tab.ts
@@ -41,7 +41,7 @@ import { CoreTabsComponent } from './tabs';
  */
 @Component({
     selector: 'core-tab',
-    template: '<ng-container *ngIf="loaded" [ngTemplateOutlet]="template"></ng-container>',
+    template: '<ng-container *ngIf="loaded && template" [ngTemplateOutlet]="template"></ng-container>',
 })
 export class CoreTabComponent implements OnInit, OnDestroy, CoreTabBase {
 
diff --git a/src/core/features/block/components/only-title-block/core-block-only-title.html b/src/core/features/block/components/only-title-block/core-block-only-title.html
index d3e85a924..46edc4a9b 100644
--- a/src/core/features/block/components/only-title-block/core-block-only-title.html
+++ b/src/core/features/block/components/only-title-block/core-block-only-title.html
@@ -1,4 +1,4 @@
-<ion-item button class="ion-text-wrap divider" (click)="gotoBlock()" detail="true">
+<ion-item button class="ion-text-wrap divider" (click)="gotoBlock()" [detail]="true">
     <ion-label>
         <h2>{{ title | translate }}</h2>
     </ion-label>
diff --git a/src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html b/src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html
index c109a16d1..023752457 100644
--- a/src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html
+++ b/src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html
@@ -1,4 +1,4 @@
-<ion-item-divider class="ion-text-wrap" *ngIf="title" sticky="true">
+<ion-item-divider class="ion-text-wrap" *ngIf="title" [sticky]="true">
     <ion-label>
         <h2>
             <core-format-text [text]="title | translate" contextLevel="block" [contextInstanceId]="block.instanceid" [courseId]="courseId">
diff --git a/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html b/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html
index 49f14b326..25ceee8f7 100644
--- a/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html
+++ b/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html
@@ -19,7 +19,7 @@
                     <p *ngIf="displaySiteUrl">{{ url }}</p>
                 </ion-label>
             </ion-item>
-            <ion-item *ngFor="let site of sites" (click)="siteClicked(site.id)" detail="false" button>
+            <ion-item *ngFor="let site of sites" (click)="siteClicked(site.id)" [detail]="false" button>
                 <core-user-avatar [user]="site" slot="start" [linkProfile]="false"></core-user-avatar>
 
                 <ion-label>
diff --git a/src/core/features/course/components/course-index/course-index.html b/src/core/features/course/components/course-index/course-index.html
index bdff39b4c..30467dd8b 100644
--- a/src/core/features/course/components/course-index/course-index.html
+++ b/src/core/features/course/components/course-index/course-index.html
@@ -16,7 +16,7 @@
             <ng-container *ngFor="let section of sectionsToRender">
                 <ion-item *ngIf="allSectionId == section.id" class="divider core-course-index-all"
                     (click)="selectSectionOrModule($event, section.id)" button [class.item-current]="selectedId === section.id"
-                    detail="false">
+                    [detail]="false">
                     <ion-label>
                         <h2>
                             <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id">
@@ -27,7 +27,7 @@
                 <ng-container *ngIf="allSectionId != section.id">
                     <ion-item class="divider section" (click)="selectSectionOrModule($event, section.id)" button
                         [class.item-current]="selectedId === section.id" [class.item-dimmed]="!section.visible"
-                        [class.item-hightlighted]="section.highlighted" detail="false" sticky="true">
+                        [class.item-hightlighted]="section.highlighted" [detail]="false">
                         <ion-icon *ngIf="section.hasVisibleModules" name="fas-chevron-right" flip-rtl slot="start"
                             class="expandable-status-icon" (ariaButtonClick)="toggleExpand($event, section)"
                             [attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
diff --git a/src/core/features/course/components/module-summary/module-summary.html b/src/core/features/course/components/module-summary/module-summary.html
index aadf0701f..0d6d0e6b6 100644
--- a/src/core/features/course/components/module-summary/module-summary.html
+++ b/src/core/features/course/components/module-summary/module-summary.html
@@ -68,7 +68,7 @@
                 <ng-container *ngFor="let grade of grades">
                     <ion-item button *ngIf="grade.gradeitem" class="ion-text-wrap divider" (click)="toggleGrade(grade)"
                         [attr.aria-label]="(grade.expanded ? 'core.collapse' : 'core.expand') | translate"
-                        [attr.aria-expanded]="grade.expanded" [attr.aria-controls]="'grade-'+grade.id" role="heading" detail="false">
+                        [attr.aria-expanded]="grade.expanded" [attr.aria-controls]="'grade-'+grade.id" role="heading" [detail]="false">
                         <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
                             [class.expandable-status-icon-expanded]="grade.expanded">
                         </ion-icon>
diff --git a/src/core/features/course/components/module/core-course-module.html b/src/core/features/course/components/module/core-course-module.html
index 9d2dc797b..b1f674f9f 100644
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@@ -109,7 +109,7 @@
 
     <!-- Loading. -->
     <ion-item *ngIf="module.handlerData.loading" role="status" class="ion-text-wrap core-module-loading"
-        [attr.aria-label]="module.handlerData.a11yTitle" detail="false">
+        [attr.aria-label]="module.handlerData.a11yTitle" [detail]="false">
         <ion-label>
             <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
         </ion-label>
diff --git a/src/core/features/course/components/tag-area/core-course-tag-area.html b/src/core/features/course/components/tag-area/core-course-tag-area.html
index 033ffc509..4fc9e95a8 100644
--- a/src/core/features/course/components/tag-area/core-course-tag-area.html
+++ b/src/core/features/course/components/tag-area/core-course-tag-area.html
@@ -1,5 +1,5 @@
 <ion-card *ngFor="let item of items">
-    <ion-item class="ion-text-wrap" (click)="openCourse(item.courseId)" [attr.aria-label]="item.courseName" button detail="true">
+    <ion-item class="ion-text-wrap" (click)="openCourse(item.courseId)" [attr.aria-label]="item.courseName" button [detail]="true">
         <ion-icon name="fas-graduation-cap" slot="start" aria-hidden="true"></ion-icon>
         <ion-label>
             <p class="item-heading">{{ item.courseName }}</p>
diff --git a/src/core/features/course/pages/course-summary/course-summary.html b/src/core/features/course/pages/course-summary/course-summary.html
index e7d2179b3..c571f3911 100644
--- a/src/core/features/course/pages/course-summary/course-summary.html
+++ b/src/core/features/course/pages/course-summary/course-summary.html
@@ -69,7 +69,7 @@
                     </ion-label>
                 </ion-item>
 
-                <ion-item class="ion-text-wrap" *ngIf="course.summary" detail="false">
+                <ion-item class="ion-text-wrap" *ngIf="course.summary" [detail]="false">
                     <ion-label>
                         <h2 class="item-heading">
                             {{'core.course.coursesummary' | translate}}
@@ -81,7 +81,7 @@
 
                 <ion-list *ngIf="course.contacts && course.contacts.length">
                     <ion-item [button]="course.contacts.length >= 5" class="ion-text-wrap" (click)="toggleContacts()"
-                        [attr.aria-label]="(contactsExpanded ? 'core.collapse' : 'core.expand') | translate" detail="false">
+                        [attr.aria-label]="(contactsExpanded ? 'core.collapse' : 'core.expand') | translate" [detail]="false">
                         <ion-icon *ngIf="course.contacts.length >= 5" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
                             class="expandable-status-icon" [class.expandable-status-icon-expanded]="contactsExpanded">
                         </ion-icon>
@@ -93,7 +93,7 @@
                     </ion-item>
                     <ng-container *ngIf="contactsExpanded || course.contacts.length < 5">
                         <ion-item button class="ion-text-wrap" *ngFor="let contact of course.contacts" core-user-link [userId]="contact.id"
-                            [courseId]="isEnrolled ? course.id : null" [attr.aria-label]="'core.viewprofile' | translate" detail="true">
+                            [courseId]="isEnrolled ? course.id : null" [attr.aria-label]="'core.viewprofile' | translate" [detail]="true">
                             <core-user-avatar [user]="contact" slot="start" [userId]="contact.id" [courseId]="isEnrolled ? course.id : null"
                                 [linkProfile]="false">
                             </core-user-avatar>
diff --git a/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html b/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
index 06589ca7b..c7eb710b3 100644
--- a/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
+++ b/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
@@ -1,38 +1,38 @@
 <ion-content>
     <ion-list>
-        <ion-item button class="ion-text-wrap" (click)="action('download')" *ngIf="downloadCourseEnabled" detail="false">
+        <ion-item button class="ion-text-wrap" (click)="action('download')" *ngIf="downloadCourseEnabled" [detail]="false">
             <ion-icon *ngIf="!prefetch.loading" [name]="prefetch.icon" slot="start" aria-hidden="true"></ion-icon>
             <ion-spinner *ngIf="prefetch.loading" slot="start" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
             <ion-label>
                 <p class="item-heading">{{ prefetch.statusTranslatable | translate }}</p>
             </ion-label>
         </ion-item>
-        <ion-item button class="ion-text-wrap" (click)="action('delete')" detail="false"
+        <ion-item button class="ion-text-wrap" (click)="action('delete')" [detail]="false"
             *ngIf="prefetch.status === 'downloaded' || prefetch.status === 'outdated'">
             <ion-icon name="fas-trash" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <p class="item-heading">{{ 'addon.storagemanager.deletedata' | translate }}</p>
             </ion-label>
         </ion-item>
-        <ion-item button class="ion-text-wrap" (click)="action('hide')" *ngIf="!course.hidden" detail="false">
+        <ion-item button class="ion-text-wrap" (click)="action('hide')" *ngIf="!course.hidden" [detail]="false">
             <ion-icon name="fas-eye" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.hidecourse' | translate }}</p>
             </ion-label>
         </ion-item>
-        <ion-item button class="ion-text-wrap" (click)="action('show')" *ngIf="course.hidden" detail="false">
+        <ion-item button class="ion-text-wrap" (click)="action('show')" *ngIf="course.hidden" [detail]="false">
             <ion-icon name="fas-eye-slash" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.show' | translate }}</p>
             </ion-label>
         </ion-item>
-        <ion-item button class="ion-text-wrap" (click)="action('favourite')" *ngIf="!course.isfavourite" detail="false">
+        <ion-item button class="ion-text-wrap" (click)="action('favourite')" *ngIf="!course.isfavourite" [detail]="false">
             <ion-icon name="fas-star" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.addtofavourites' | translate }}</p>
             </ion-label>
         </ion-item>
-        <ion-item button class="ion-text-wrap" (click)="action('unfavourite')" *ngIf="course.isfavourite" detail="false">
+        <ion-item button class="ion-text-wrap" (click)="action('unfavourite')" *ngIf="course.isfavourite" [detail]="false">
             <ion-icon name="far-star" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.removefromfavourites' | translate }}</p>
diff --git a/src/core/features/courses/pages/categories/categories.html b/src/core/features/courses/pages/categories/categories.html
index c4c600bc1..bdc86b61d 100644
--- a/src/core/features/courses/pages/categories/categories.html
+++ b/src/core/features/courses/pages/categories/categories.html
@@ -48,7 +48,7 @@
                 </ion-item-divider>
                 <ion-card *ngFor="let category of categories">
                     <ion-item button class="ion-text-wrap" (click)="openCategory(category.id)" [attr.aria-label]="category.name"
-                        detail="true">
+                        [detail]="true">
                         <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.category' | translate"></ion-icon>
                         <ion-label>
                             <p class="item-heading">
diff --git a/src/core/features/grades/pages/courses/courses.html b/src/core/features/grades/pages/courses/courses.html
index 7f9a192b8..1c6149ebd 100644
--- a/src/core/features/grades/pages/courses/courses.html
+++ b/src/core/features/grades/pages/courses/courses.html
@@ -19,7 +19,7 @@
 
             <ion-list *ngIf="!courses.empty">
                 <ion-item *ngFor="let course of courses.items" [attr.aria-label]="course.courseFullName"
-                    [attr.aria-current]="courses.getItemAriaCurrent(course)" class="ion-text-wrap" button detail="true"
+                    [attr.aria-current]="courses.getItemAriaCurrent(course)" class="ion-text-wrap" button [detail]="true"
                     (click)="courses.select(course)">
                     <ion-label>
                         <core-format-text [text]="course.courseFullName" [contextInstanceId]="course.courseid" contextLevel="course">
diff --git a/src/core/features/login/components/site-help/site-help.html b/src/core/features/login/components/site-help/site-help.html
index 675d3809c..3517b8dc6 100644
--- a/src/core/features/login/components/site-help/site-help.html
+++ b/src/core/features/login/components/site-help/site-help.html
@@ -13,8 +13,8 @@
 <ion-content>
     <ion-list>
         <ng-container *ngFor="let question of questions">
-            <ion-item button class="ion-text-wrap divider" (click)="toggle(question)" sticky="true" [attr.aria-expanded]="isOpen(question)"
-                [attr.aria-controls]="'question-' + question.id + '-answer'" role="heading" detail="false">
+            <ion-item button class="ion-text-wrap divider" (click)="toggle(question)" [attr.aria-expanded]="isOpen(question)"
+                [attr.aria-controls]="'question-' + question.id + '-answer'" role="heading" [detail]="false">
                 <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
                     [class.expandable-status-icon-expanded]="isOpen(question)">
                 </ion-icon>
diff --git a/src/core/features/login/pages/site/site.html b/src/core/features/login/pages/site/site.html
index e6e1fb8cc..71cdc764b 100644
--- a/src/core/features/login/pages/site/site.html
+++ b/src/core/features/login/pages/site/site.html
@@ -49,7 +49,7 @@
                         </ion-label>
                     </ion-item>
                     <ion-item button *ngIf="enteredSiteUrl" (click)="connect(enteredSiteUrl.url, $event)"
-                        [attr.aria-label]="'core.login.connect' | translate" detail="true" class="core-login-entered-site">
+                        [attr.aria-label]="'core.login.connect' | translate" [detail]="true" class="core-login-entered-site">
                         <ion-thumbnail slot="start" aria-hidden="true">
                             <ion-icon name="fas-pen" aria-hidden="true"></ion-icon>
                         </ion-thumbnail>
@@ -120,7 +120,7 @@
 
 <!-- Template site selector. -->
 <ng-template #sitelisting let-site="site">
-    <ion-item button (click)="connect(site.url, $event, site)" [ngClass]="site.className" [attr.aria-label]="site.name" detail="true">
+    <ion-item button (click)="connect(site.url, $event, site)" [ngClass]="site.className" [attr.aria-label]="site.name" [detail]="true">
         <ion-thumbnail *ngIf="siteFinderSettings.displayimage" slot="start">
             <img [src]="site.imageurl" *ngIf="site.imageurl" onError="this.src='assets/icon/icon.png'" alt="" role="presentation">
             <img src="assets/icon/icon.png" *ngIf="!site.imageurl" class="core-login-default-icon" alt="" role="presentation">
diff --git a/src/core/features/mainmenu/components/user-menu/user-menu.html b/src/core/features/mainmenu/components/user-menu/user-menu.html
index de361493a..8de97c149 100644
--- a/src/core/features/mainmenu/components/user-menu/user-menu.html
+++ b/src/core/features/mainmenu/components/user-menu/user-menu.html
@@ -16,7 +16,7 @@
     <core-loading [hideUntil]="siteLogoLoaded && handlersLoaded">
         <ion-list>
             <!-- Site info with URL and clickable. -->
-            <ion-item button class="core-usermenu-siteinfo ion-text-wrap" *ngIf="siteInfo && displaySiteUrl" lines="full" detail="false"
+            <ion-item button class="core-usermenu-siteinfo ion-text-wrap" *ngIf="siteInfo && displaySiteUrl" lines="full" [detail]="false"
                 [href]="siteUrl" core-link auto-login="yes">
                 <ion-label>
                     <!-- Show site logo. -->
@@ -43,7 +43,7 @@
             </ion-item>
 
             <ion-item button class="core-usermenu-handler ion-text-wrap" *ngIf="siteInfo" lines="full" (click)="openUserProfile($event)"
-                detail="true" [attr.aria-label]="'core.user.profile' | translate">
+                [detail]="true" [attr.aria-label]="'core.user.profile' | translate">
                 <core-user-avatar [user]="siteInfo" [userId]="siteInfo.userid" [linkProfile]="false" slot="start"></core-user-avatar>
                 <ion-label>
                     <p class="item-heading">{{ siteInfo.fullname }}</p>
@@ -58,7 +58,7 @@
 
             <ion-item button *ngFor="let handler of handlers" class="ion-text-wrap" (click)="handlerClicked($event, handler)"
                 [ngClass]="['core-user-menu-handler', handler.class || '']" [hidden]="handler.hidden"
-                [attr.aria-label]="handler.title | translate" detail="true">
+                [attr.aria-label]="handler.title | translate" [detail]="true">
                 <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>
                     <p class="item-heading">{{ handler.title | translate }}</p>
@@ -73,7 +73,7 @@
                 </ion-spinner>
             </ion-item>
 
-            <ion-item button (click)="openPreferences($event)" [attr.aria-label]="'core.settings.preferences' | translate" detail="true"
+            <ion-item button (click)="openPreferences($event)" [attr.aria-label]="'core.settings.preferences' | translate" [detail]="true"
                 class="core-user-menu-preferences">
                 <ion-icon name="fas-wrench" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>
@@ -82,7 +82,8 @@
             </ion-item>
 
             <ion-item *ngIf="displayContactSupport" button (click)="contactSupport($event)"
-                [attr.aria-label]="'core.user.support' | translate" detail="true" detailIcon="open-outline" class="core-user-menu-support">
+                [attr.aria-label]="'core.user.support' | translate" [detail]="true" detailIcon="open-outline"
+                class="core-user-menu-support">
                 <ion-icon name="fas-envelope" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>
                     <p class="item-heading">{{ 'core.user.support' | translate }}</p>
@@ -92,7 +93,7 @@
     </core-loading>
 </ion-content>
 <ion-footer>
-    <ion-item *ngIf="displaySwitchAccount" button lines="full" (click)="switchAccounts($event)" detail="true" class="ion-text-wrap">
+    <ion-item *ngIf="displaySwitchAccount" button lines="full" (click)="switchAccounts($event)" [detail]="true" class="ion-text-wrap">
         <ion-icon name="fas-right-left" slot="start" aria-hidden="true"></ion-icon>
         <ion-label>
             <p class="item-heading">{{ 'core.mainmenu.switchaccount' | translate }}</p>
diff --git a/src/core/features/mainmenu/pages/more/more.html b/src/core/features/mainmenu/pages/more/more.html
index a14467035..a9582312b 100644
--- a/src/core/features/mainmenu/pages/more/more.html
+++ b/src/core/features/mainmenu/pages/more/more.html
@@ -21,7 +21,7 @@
             </ion-label>
         </ion-item>
         <ion-item button *ngFor="let handler of handlers" [ngClass]="['core-moremenu-handler', handler.class || '']"
-            (click)="openHandler(handler)" [attr.aria-label]="handler.title | translate" detail="true">
+            (click)="openHandler(handler)" [attr.aria-label]="handler.title | translate" [detail]="true">
             <ion-icon [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <p class="item-heading">{{ handler.title | translate}}</p>
@@ -37,7 +37,7 @@
         </ion-item>
         <ng-container *ngFor="let item of customItems">
             <ion-item button *ngIf="item.type !== 'embedded'" [href]="item.url" [attr.aria-label]="item.label" core-link
-                [capture]="item.type === 'app'" [inApp]="item.type === 'inappbrowser'" class="core-moremenu-customitem" detail="true"
+                [capture]="item.type === 'app'" [inApp]="item.type === 'inappbrowser'" class="core-moremenu-customitem" [detail]="true"
                 [detailIcon]="item.type === 'browser' ? 'open-outline' : 'chevron-forward'">
                 <ion-icon [name]="item.icon" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>
@@ -45,14 +45,14 @@
                 </ion-label>
             </ion-item>
             <ion-item button *ngIf="item.type === 'embedded'" (click)="openItem(item)" [attr.aria-label]="item.label"
-                class="core-moremenu-customitem" detail="true">
+                class="core-moremenu-customitem" [detail]="true">
                 <ion-icon [name]="item.icon" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>
                     <p class="item-heading">{{item.label}}</p>
                 </ion-label>
             </ion-item>
         </ng-container>
-        <ion-item button *ngIf="showScanQR" (click)="scanQR()" detail="true">
+        <ion-item button *ngIf="showScanQR" (click)="scanQR()" [detail]="true">
             <ion-icon name="fas-qrcode" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <p class="item-heading">{{ 'core.scanqr' | translate }}</p>
@@ -61,7 +61,7 @@
     </ion-list>
 </ion-content>
 <ion-footer>
-    <ion-item button (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate" detail="true">
+    <ion-item button (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate" [detail]="true">
         <ion-icon name="fas-gears" slot="start" aria-hidden="true"></ion-icon>
         <ion-label>
             <p class="item-heading">{{ 'core.settings.appsettings' | translate }}</p>
diff --git a/src/core/features/reminders/components/set-reminder-menu/set-reminder-menu.html b/src/core/features/reminders/components/set-reminder-menu/set-reminder-menu.html
index 45a4bd241..425bc39d1 100644
--- a/src/core/features/reminders/components/set-reminder-menu/set-reminder-menu.html
+++ b/src/core/features/reminders/components/set-reminder-menu/set-reminder-menu.html
@@ -9,7 +9,7 @@
     <ion-content>
         <!-- Preset options. -->
         <ng-container *ngFor="let option of presetOptions">
-            <ion-item button class="ion-text-wrap" (click)="setReminder(option.radioValue)" detail="false" *ngIf="option.enabled"
+            <ion-item button class="ion-text-wrap" (click)="setReminder(option.radioValue)" [detail]="false" *ngIf="option.enabled"
                 [attr.aria-selected]="currentValue === option.radioValue">
                 <ion-label>
                     <p class="item-heading">{{ option.label }}</p>
@@ -19,7 +19,7 @@
         </ng-container>
 
         <!-- Custom value. -->
-        <ion-item button class="ion-text-wrap" (click)="setCustom($event)" detail="false" [attr.aria-selected]="currentValue === 'custom'">
+        <ion-item button class="ion-text-wrap" (click)="setCustom($event)" [detail]="false" [attr.aria-selected]="currentValue === 'custom'">
             <ion-label>
                 <p class="item-heading">{{ 'core.reminders.custom' | translate }}</p>
                 <p>{{ customLabel }}</p>
@@ -27,7 +27,7 @@
             <ion-icon name="fas-check" *ngIf="currentValue === 'custom'" slot="end" aria-hidden="true"></ion-icon>
         </ion-item>
 
-        <ion-item *ngIf="noReminderLabel" button class="ion-text-wrap text-danger border-top" (click)="disableReminder()" detail="false"
+        <ion-item *ngIf="noReminderLabel" button class="ion-text-wrap text-danger border-top" (click)="disableReminder()" [detail]="false"
             [attr.aria-selected]="currentValue === 'disabled'">
             <ion-label>
                 <p class="item-heading">{{ noReminderLabel | translate }}</p>
diff --git a/src/core/features/search/components/search-box/core-search-box.html b/src/core/features/search/components/search-box/core-search-box.html
index 57a4eaac3..6f0cc0bba 100644
--- a/src/core/features/search/components/search-box/core-search-box.html
+++ b/src/core/features/search/components/search-box/core-search-box.html
@@ -15,7 +15,7 @@
     </ion-item>
     <ion-list class="core-search-history" [hidden]="!historyShown">
         <ion-item button class="ion-text-wrap" *ngFor="let item of history" (click)="historyClicked($event, item.searchedtext)" tabindex="0"
-            detail="true">
+            [detail]="true">
             <ion-icon name="fas-clock-rotate-left" slot="start" aria-hidden="true">
             </ion-icon>
             <ion-label>{{item.searchedtext}}</ion-label>
diff --git a/src/core/features/settings/pages/about/about.html b/src/core/features/settings/pages/about/about.html
index 198f1cdaf..2f7796a70 100644
--- a/src/core/features/settings/pages/about/about.html
+++ b/src/core/features/settings/pages/about/about.html
@@ -13,26 +13,26 @@
 
 <ion-content>
     <ion-list class="list-item-limited-width">
-        <ion-item button class="ion-text-wrap" (click)="openPage('licenses')" detail="true">
+        <ion-item button class="ion-text-wrap" (click)="openPage('licenses')" [detail]="true">
             <ion-icon name="far-copyright" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>{{ 'core.settings.opensourcelicenses' | translate }}</ion-label>
         </ion-item>
-        <ion-item *ngIf="privacyPolicy" class="ion-text-wrap" button core-link auto-login="no" [href]="privacyPolicy" detail="true"
+        <ion-item *ngIf="privacyPolicy" class="ion-text-wrap" button core-link auto-login="no" [href]="privacyPolicy" [detail]="true"
             detailIcon="open-outline">
             <ion-icon name="fas-user-shield" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>{{ 'core.settings.privacypolicy' | translate }}</ion-label>
         </ion-item>
-        <ion-item *ngIf="a11yStatement" class="ion-text-wrap" button core-link auto-login="no" [href]="a11yStatement" detail="true"
+        <ion-item *ngIf="a11yStatement" class="ion-text-wrap" button core-link auto-login="no" [href]="a11yStatement" [detail]="true"
             detailIcon="open-outline">
             <ion-icon name="fas-universal-access" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>{{ 'core.settings.accessstatement' | translate }}</ion-label>
         </ion-item>
         <ion-item *ngIf="currentSite && feedbackFormUrl && showSurvey" class="ion-text-wrap" button core-link [href]="feedbackFormUrl"
-            detail="true" detailIcon="open-outline">
+            [detail]="true" detailIcon="open-outline">
             <ion-icon name="fas-bullhorn" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>{{ 'core.settings.helpusimprove' | translate }}</ion-label>
         </ion-item>
-        <ion-item *ngIf="legalDisclaimer" class="ion-text-wrap" button core-link auto-login="no" [href]="legalDisclaimer" detail="true"
+        <ion-item *ngIf="legalDisclaimer" class="ion-text-wrap" button core-link auto-login="no" [href]="legalDisclaimer" [detail]="true"
             detailIcon="open-outline">
             <ion-icon name="fas-scale-balanced" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>{{ 'core.settings.legaldisclaimer' | translate }}</ion-label>
@@ -41,7 +41,7 @@
 </ion-content>
 
 <ion-footer class="ion-no-border">
-    <ion-item button class="ion-text-wrap ion-text-center core-about-deviceinfo" detail="false" (click)="openPage('deviceinfo')">
+    <ion-item button class="ion-text-wrap ion-text-center core-about-deviceinfo" [detail]="false" (click)="openPage('deviceinfo')">
         <ion-label>
             <p class="item-heading">{{ appName }} {{ versionName }}</p>
         </ion-label>
diff --git a/src/core/features/settings/pages/deviceinfo/deviceinfo.html b/src/core/features/settings/pages/deviceinfo/deviceinfo.html
index 45385d0dd..c4da48990 100644
--- a/src/core/features/settings/pages/deviceinfo/deviceinfo.html
+++ b/src/core/features/settings/pages/deviceinfo/deviceinfo.html
@@ -18,7 +18,7 @@
 
 <ion-content>
     <ion-list class="list-item-limited-width">
-        <ion-item *ngIf="showDevOptions" detail="true" (click)="gotoDevOptions()">
+        <ion-item *ngIf="showDevOptions" [detail]="true" (click)="gotoDevOptions()">
             <ion-icon name="fas-terminal" slot="start" aria-hidden="true"></ion-icon>
             <ion-label class="ion-text-wrap">
                 <p class="item-heading">{{ 'core.settings.developeroptions' | translate }}</p>
diff --git a/src/core/features/settings/pages/index/index.html b/src/core/features/settings/pages/index/index.html
index aa88d9c50..d9cca2a34 100644
--- a/src/core/features/settings/pages/index/index.html
+++ b/src/core/features/settings/pages/index/index.html
@@ -12,8 +12,8 @@
 <ion-content>
     <core-split-view>
         <ion-list>
-            <ion-item *ngFor="let section of sections.items" [attr.aria-current]="sections.getItemAriaCurrent(section)" button detail="true"
-                (click)="sections.select(section)">
+            <ion-item *ngFor="let section of sections.items" [attr.aria-current]="sections.getItemAriaCurrent(section)" button
+                [detail]="true" (click)="sections.select(section)">
                 <ion-icon [name]="section.icon" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>{{ section.name | translate }}</ion-label>
             </ion-item>
diff --git a/src/core/features/settings/pages/licenses/licenses.html b/src/core/features/settings/pages/licenses/licenses.html
index 485c3c63e..b883d1942 100644
--- a/src/core/features/settings/pages/licenses/licenses.html
+++ b/src/core/features/settings/pages/licenses/licenses.html
@@ -15,7 +15,7 @@
             [placeholder]="'core.filter' | translate" class="ion-margin-top">
         </ion-searchbar>
         <ion-list>
-            <ion-item button *ngIf="error" class="ion-text-wrap" [href]="licensesUrl" core-link auto-login="no" detail="false">
+            <ion-item button *ngIf="error" class="ion-text-wrap" [href]="licensesUrl" core-link auto-login="no" [detail]="false">
                 <ion-label>
                     {{ 'core.settings.opensourcelicenses' | translate }}
                 </ion-label>
diff --git a/src/core/features/sharedfiles/components/list/list.html b/src/core/features/sharedfiles/components/list/list.html
index 96174712a..51823b9a7 100644
--- a/src/core/features/sharedfiles/components/list/list.html
+++ b/src/core/features/sharedfiles/components/list/list.html
@@ -13,7 +13,7 @@
                 (onDelete)="fileDeleted(idx)" (onRename)="fileRenamed(idx, $event)">
             </core-local-file>
 
-            <ion-item button *ngIf="!file.isFile" class="ion-text-wrap item-file item-directory" (click)="openFolder(file)" detail="true">
+            <ion-item button *ngIf="!file.isFile" class="ion-text-wrap item-file item-directory" (click)="openFolder(file)" [detail]="true">
                 <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.folder' | translate"></ion-icon>
                 <ion-label>{{ file.name }}</ion-label>
             </ion-item>
diff --git a/src/core/features/siteplugins/components/only-title-block/core-siteplugins-only-title-block.html b/src/core/features/siteplugins/components/only-title-block/core-siteplugins-only-title-block.html
index c80615fda..923599f69 100644
--- a/src/core/features/siteplugins/components/only-title-block/core-siteplugins-only-title-block.html
+++ b/src/core/features/siteplugins/components/only-title-block/core-siteplugins-only-title-block.html
@@ -1,4 +1,4 @@
-<ion-item button class="divider ion-text-wrap" detail="true" (click)="gotoBlock()">
+<ion-item button class="divider ion-text-wrap" [detail]="true" (click)="gotoBlock()">
     <ion-label>
         <h2>{{ title | translate }}</h2>
     </ion-label>
diff --git a/src/core/features/tag/pages/index/index.html b/src/core/features/tag/pages/index/index.html
index e3963735c..3e8f9c87e 100644
--- a/src/core/features/tag/pages/index/index.html
+++ b/src/core/features/tag/pages/index/index.html
@@ -21,7 +21,7 @@
                     <ion-label class="ion-text-wrap">{{ 'core.tag.warningareasnotsupported' | translate }}</ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngFor="let area of areas" [attr.aria-label]="area.nameKey | translate"
-                    (click)="openArea(area)" [attr.aria-current]="area.id === selectedAreaId ? 'page' : 'false'" button detail="true">
+                    (click)="openArea(area)" [attr.aria-current]="area.id === selectedAreaId ? 'page' : 'false'" button [detail]="true">
                     <ion-label>
                         <p class="item-heading">{{ area.nameKey | translate }}</p>
                     </ion-label>
diff --git a/src/core/features/user/pages/participants/participants.html b/src/core/features/user/pages/participants/participants.html
index fa9e23016..c724447a0 100644
--- a/src/core/features/user/pages/participants/participants.html
+++ b/src/core/features/user/pages/participants/participants.html
@@ -20,7 +20,7 @@
             <ion-list *ngIf="!participants.empty">
                 <ion-item *ngFor="let participant of participants.items" class="ion-text-wrap"
                     [attr.aria-current]="participants.getItemAriaCurrent(participant)" [attr.aria-label]="participant.fullname"
-                    (click)="participants.select(participant)" button detail="true">
+                    (click)="participants.select(participant)" button [detail]="true">
 
                     <core-user-avatar [user]="participant" [linkProfile]="false" [checkOnline]="true" slot="start">
                     </core-user-avatar>
diff --git a/src/core/features/user/pages/profile/profile.html b/src/core/features/user/pages/profile/profile.html
index b8be19e55..17a3ce676 100644
--- a/src/core/features/user/pages/profile/profile.html
+++ b/src/core/features/user/pages/profile/profile.html
@@ -51,7 +51,7 @@
                 </div>
             </div>
             <ion-item button class="ion-text-wrap core-user-profile-handler" (click)="openUserDetails()"
-                [attr.aria-label]="'core.user.details' | translate" detail="true">
+                [attr.aria-label]="'core.user.details' | translate" [detail]="true">
                 <ion-icon name="fas-user" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>
                     <p class="item-heading">{{ 'core.user.details' | translate }}</p>
@@ -64,7 +64,7 @@
             </ion-item>
             <ion-item button *ngFor="let handler of newPageHandlers" class="ion-text-wrap" (click)="handlerClicked($event, handler)"
                 [ngClass]="['core-user-profile-handler', handler.class || '']" [hidden]="handler.hidden"
-                [attr.aria-label]="handler.title | translate" detail="true">
+                [attr.aria-label]="handler.title | translate" [detail]="true">
                 <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>
                     <p class="item-heading">{{ handler.title | translate }}</p>