feat(material/sort): add showSortIcon option to MatSortHeader and update styles

goldens/material/sort/index.api.md

@@ -94,6 +94,7 @@ export const matSortAnimations: {
 export interface MatSortDefaultOptions {
     arrowPosition?: SortHeaderArrowPosition;
     disableClear?: boolean;
+    showSortIcon?: boolean;
 }
 
 // @public
@@ -120,21 +121,24 @@ export class MatSortHeader implements MatSortable, OnDestroy, OnInit, AfterViewI
     // (undocumented)
     static ngAcceptInputType_disabled: unknown;
     // (undocumented)
+    static ngAcceptInputType_showSortIcon: unknown;
+    // (undocumented)
     ngAfterViewInit(): void;
     // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;
     protected _recentlyCleared: i0.WritableSignal<SortDirection | null>;
     _renderArrow(): boolean;
+    showSortIcon: boolean;
     // (undocumented)
     _sort: MatSort;
     get sortActionDescription(): string;
     set sortActionDescription(value: string);
     start: SortDirection;
     _toggleOnInteraction(): void;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSortHeader, "[mat-sort-header]", ["matSortHeader"], { "id": { "alias": "mat-sort-header"; "required": false; }; "arrowPosition": { "alias": "arrowPosition"; "required": false; }; "start": { "alias": "start"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "sortActionDescription": { "alias": "sortActionDescription"; "required": false; }; "disableClear": { "alias": "disableClear"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSortHeader, "[mat-sort-header]", ["matSortHeader"], { "id": { "alias": "mat-sort-header"; "required": false; }; "arrowPosition": { "alias": "arrowPosition"; "required": false; }; "start": { "alias": "start"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "sortActionDescription": { "alias": "sortActionDescription"; "required": false; }; "disableClear": { "alias": "disableClear"; "required": false; }; "showSortIcon": { "alias": "showSortIcon"; "required": false; }; }, {}, never, ["*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSortHeader, never>;
 }

src/material/sort/sort-header.scss

@@ -52,7 +52,7 @@
 
   to {
     transform: translateY(-25%);
-    opacity: 0;
+    opacity: var(--mat-sort-header-opacity);
   }
 }
 
@@ -64,7 +64,7 @@
 
   to {
     transform: translateY(25%) rotate(180deg);
-    opacity: 0;
+    opacity: var(--mat-sort-header-opacity);
   }
 }
 
@@ -74,7 +74,7 @@
   width: 12px;
   position: relative;
   transition: transform $timing, opacity $timing;
-  opacity: 0;
+  opacity: var(--mat-sort-header-opacity);
   overflow: visible;
 
   @include token-utils.use-tokens(m2-sort.$prefix, m2-sort.get-token-slots()) {

src/material/sort/sort-header.ts

@@ -86,6 +86,7 @@ interface MatSortHeaderColumnDef {
     '(mouseleave)': '_recentlyCleared.set(null)',
     '[attr.aria-sort]': '_getAriaSortAttribute()',
     '[class.mat-sort-header-disabled]': '_isDisabled()',
+    '[style.--mat-sort-header-opacity]': 'showSortIcon ? 0.54 : 0',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -151,6 +152,10 @@ export class MatSortHeader implements MatSortable, OnDestroy, OnInit, AfterViewI
   @Input({transform: booleanAttribute})
   disableClear: boolean;
 
+  /** Overrides the show sort icon value of the containing MatSort for this MatSortable. */
+  @Input({transform: booleanAttribute})
+  showSortIcon: boolean;
+
   constructor(...args: unknown[]);
 
   constructor() {
@@ -170,6 +175,10 @@ export class MatSortHeader implements MatSortable, OnDestroy, OnInit, AfterViewI
     if (defaultOptions?.arrowPosition) {
       this.arrowPosition = defaultOptions?.arrowPosition;
     }
+
+    if (defaultOptions?.showSortIcon) {
+      this.showSortIcon = defaultOptions.showSortIcon;
+    }
   }
 
   ngOnInit() {

src/material/sort/sort.spec.ts

@@ -420,6 +420,40 @@ describe('MatSort', () => {
       expect(containerB.classList.contains('mat-sort-header-position-before')).toBe(true);
     });
   });
+
+  describe('with default showSortIcon', () => {
+    let fixture: ComponentFixture<MatSortWithoutInputs>;
+
+    const getComputedStyleProp = (el: Element | null, prop: string): any =>
+      el ? getComputedStyle(el).getPropertyValue(prop) : undefined;
+
+    beforeEach(waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatSortModule, MatTableModule, CdkTableModule, MatSortWithoutInputs],
+        providers: [
+          {
+            provide: MAT_SORT_DEFAULT_OPTIONS,
+            useValue: {
+              showSortIcon: true,
+            },
+          },
+        ],
+      });
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(MatSortWithoutInputs);
+      fixture.detectChanges();
+    });
+
+    it('should show sort icons by default', () => {
+      const containerA = fixture.nativeElement.querySelector('#defaultA .mat-sort-header-arrow');
+      const containerB = fixture.nativeElement.querySelector('#defaultB .mat-sort-header-arrow');
+
+      expect(getComputedStyleProp(containerA, 'opacity')?.toString()).toBe('0.54');
+      expect(getComputedStyleProp(containerB, 'opacity')?.toString()).toBe('0.54');
+    });
+  });
 });
 
 /**

src/material/sort/sort.ts

@@ -57,6 +57,8 @@ export interface MatSortDefaultOptions {
   disableClear?: boolean;
   /** Position of the arrow that displays when sorted. */
   arrowPosition?: SortHeaderArrowPosition;
+  /** Show sort icons by default. */
+  showSortIcon?: boolean;
 }
 
 /** Injection token to be used to override the default options for `mat-sort`. */