src/app/common/components/infinite-scroll/horizontal-infinite-scroll.component.ts

@@ -7,6 +7,7 @@ import { Subscription } from "rxjs";
   template: `
     <div class="mdl-spinner mdl-js-spinner is-active" [mdl] [hidden]="!inProgress"></div>
     <div class="m-infinite-scroll-manual"
+         [class.m-infinite-scroll-manual__loadMore]="!iconOnly"
          [class.mdl-color--blue-grey-200]="!iconOnly"
          [class.mdl-color-text--blue-grey-500]="!iconOnly"
          [hidden]="inProgress || !moreData"
@@ -17,6 +18,7 @@ import { Subscription } from "rxjs";
       <i class="material-icons" *ngIf="iconOnly">keyboard_arrow_right</i>
     </div>
     <div class="m-infinite-scroll-manual"
+         [class.m-infinite-scroll-manual__noMore]="!iconOnly"
          [class.mdl-color--blue-grey-200]="!iconOnly"
          [class.mdl-color-text--blue-grey-500]="!iconOnly"
          [hidden]="moreData"

src/app/common/components/infinite-scroll/infinite-scroll.scss

@@ -14,4 +14,27 @@ infinite-scroll{
     font-weight: 600;
     cursor:pointer;
   }
+
+  .m-infinite-scroll-manual__noMore{
+    cursor: text;
+    
+    @include m-theme(){
+      color: themed($m-blue-grey-300) !important;
+      background-color: themed($m-blue-grey-50) !important;
+    }
+  }
+
+  .m-infinite-scroll-manual__loadMore{
+    &:hover {
+      @include m-theme(){
+        color: themed($m-blue-grey-700) !important;
+        background-color: themed($m-blue-grey-300) !important;
+      }
+    }
+    &:active {
+      @include m-theme(){
+        background-color: themed($m-blue-grey-200) !important;
+      }
+    }
+  }
 }

src/app/common/components/infinite-scroll/infinite-scroll.ts

@@ -7,6 +7,7 @@ import { Subscription } from "rxjs";
   template: `
     <div class="mdl-spinner mdl-js-spinner is-active" [mdl] [hidden]="!inProgress"></div>
     <div class="m-infinite-scroll-manual"
+         [class.m-infinite-scroll-manual__loadMore]="!iconOnly"
          [class.mdl-color--blue-grey-200]="!iconOnly"
          [class.mdl-color-text--blue-grey-500]="!iconOnly"
          [hidden]="inProgress || !moreData"
@@ -17,6 +18,7 @@ import { Subscription } from "rxjs";
       <i class="material-icons" *ngIf="iconOnly">keyboard_arrow_down</i>
     </div>
     <div class="m-infinite-scroll-manual"
+         [class.m-infinite-scroll-manual__noMore]="!iconOnly"
          [class.mdl-color--blue-grey-200]="!iconOnly"
          [class.mdl-color-text--blue-grey-500]="!iconOnly"
          [hidden]="moreData"