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 a11a4b319..4072066ff 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
@@ -65,7 +65,7 @@
 
             <!-- Summary of submissions with draft status. -->
             <ion-item class="ion-text-wrap" *ngIf="assign.submissiondrafts && summary && summary.submissionsenabled"
-                [class.hide-detail]="!summary.submissiondraftscount" detail="true" [button]="summary.submissiondraftscount"
+                [detail]="summary.submissiondraftscount" [button]="summary.submissiondraftscount"
                 (click)="goToSubmissionList(submissionStatusDraft, !!summary.submissiondraftscount)">
                 <ion-label>
                     <h2>{{ 'addon.mod_assign.numberofdraftsubmissions' | translate }}</h2>
@@ -80,8 +80,8 @@
             </ion-item>
 
             <!-- Summary of submissions with submitted status. -->
-            <ion-item class="ion-text-wrap" *ngIf="summary && summary.submissionsenabled"
-                [class.hide-detail]="!summary.submissionssubmittedcount" detail="true" [button]="summary.submissionssubmittedcount"
+            <ion-item class="ion-text-wrap" *ngIf="summary && summary.submissionsenabled" [detail]="summary.submissionssubmittedcount"
+                [button]="summary.submissionssubmittedcount"
                 (click)="goToSubmissionList(submissionStatusSubmitted, !!summary.submissionssubmittedcount)">
                 <ion-label>
                     <h2>{{ 'addon.mod_assign.numberofsubmittedassignments' | translate }}</h2>
@@ -97,7 +97,7 @@
 
             <!-- Summary of submissions that need grading. -->
             <ion-item class="ion-text-wrap" *ngIf="summary && summary.submissionsenabled && !assign.teamsubmission"
-                [class.hide-detail]="!needsGradingAvailable" detail="true" [button]="needsGradingAvailable"
+                [detail]="needsGradingAvailable" [button]="needsGradingAvailable"
                 (click)="goToSubmissionList(needGrading, needsGradingAvailable)">
                 <ion-label>
                     <h2>{{ 'addon.mod_assign.numberofsubmissionsneedgrading' | translate }}</h2>
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 00bc860e7..bf91cdaec 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
@@ -70,8 +70,8 @@
                 </ion-select-option>
             </ion-select>
         </ion-item>
-        <ion-item class="ion-text-wrap" (click)="openAttempts()" [class.hide-detail]="!(access.canviewreports && completedCount > 0)"
-            detail="true" [button]="access.canviewreports && completedCount > 0">
+        <ion-item class="ion-text-wrap" (click)="openAttempts()" [detail]="access.canviewreports && completedCount > 0"
+            [button]="access.canviewreports && completedCount > 0">
             <ion-label>
                 <h2>{{ 'addon.mod_feedback.completed_feedbacks' | translate }}</h2>
             </ion-label>
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 5432ccb09..fe477e1e8 100644
--- a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
+++ b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
@@ -65,7 +65,7 @@
 <!-- Template to render a list of conversations. -->
 <ng-template #attemptsTemplate let-attempts="attempts">
     <!-- "Header" of the table -->
-    <ion-item class="ion-text-wrap addon-mod_h5pactivity-table-header hide-detail" detail="true">
+    <ion-item class="ion-text-wrap addon-mod_h5pactivity-table-header" [detail]="false">
         <ion-label>
             <ion-row class="ion-align-items-center">
                 <ion-col class="ion-text-center">#</ion-col>
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 375cb84cc..c9a58d517 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 font-bold" [detail]="false">
                 <ion-label>
                     <ion-row class="ion-align-items-center">
                         <ion-col class="ion-text-center" size="4">{{ 'core.user' | translate }}</ion-col>
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index f3d4ef15b..58b86f8a2 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1257,11 +1257,6 @@ ion-datetime.datetime-disabled {
     opacity: .8 !important;
 }
 
-// Hide details on items to align badges.
-ion-item.hide-detail {
-    --detail-icon-opacity: 0;
-}
-
 // Make links clickable when inside radio or checkbox items. Style part.
 @media (hover: hover) {
     ion-item.item-multiple-inputs:hover::part(native) {