diff --git a/goldens/material/sort/index.api.md b/goldens/material/sort/index.api.md index 6abd820959cc..30d4302c7807 100644 --- a/goldens/material/sort/index.api.md +++ b/goldens/material/sort/index.api.md @@ -113,7 +113,7 @@ export class MatSortHeader implements MatSortable, OnDestroy, OnInit, AfterViewI start: SortDirection; _toggleOnInteraction(): void; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } diff --git a/src/components-examples/material/sort/BUILD.bazel b/src/components-examples/material/sort/BUILD.bazel index ccf43f58ffca..7c924d672622 100644 --- a/src/components-examples/material/sort/BUILD.bazel +++ b/src/components-examples/material/sort/BUILD.bazel @@ -18,6 +18,7 @@ ng_project( "//:node_modules/@types/jasmine", "//src/cdk/testing", "//src/cdk/testing/testbed", + "//src/material/icon", "//src/material/sort", "//src/material/sort/testing", ], diff --git a/src/components-examples/material/sort/index.ts b/src/components-examples/material/sort/index.ts index 9b231167c26a..4e459024357c 100644 --- a/src/components-examples/material/sort/index.ts +++ b/src/components-examples/material/sort/index.ts @@ -1,2 +1,3 @@ export {SortOverviewExample} from './sort-overview/sort-overview-example'; export {SortHarnessExample} from './sort-harness/sort-harness-example'; +export {SortCustomIconExample} from './sort-custom-icon/sort-custom-icon-example'; diff --git a/src/components-examples/material/sort/sort-custom-icon/sort-custom-icon-example.html b/src/components-examples/material/sort/sort-custom-icon/sort-custom-icon-example.html new file mode 100644 index 000000000000..f24debdb305a --- /dev/null +++ b/src/components-examples/material/sort/sort-custom-icon/sort-custom-icon-example.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + +
+ Emoji icon + ⬆️ + + Material Icon + keyboard_arrow_up +
Lorem, ipsum dolor sit amet.Lorem, ipsum dolor sit amet.
diff --git a/src/components-examples/material/sort/sort-custom-icon/sort-custom-icon-example.ts b/src/components-examples/material/sort/sort-custom-icon/sort-custom-icon-example.ts new file mode 100644 index 000000000000..5a864592b06c --- /dev/null +++ b/src/components-examples/material/sort/sort-custom-icon/sort-custom-icon-example.ts @@ -0,0 +1,13 @@ +import {Component} from '@angular/core'; +import {MatIcon} from '@angular/material/icon'; +import {MatSortModule} from '@angular/material/sort'; + +/** + * @title Sort header with a custom icon + */ +@Component({ + selector: 'sort-custom-icon-example', + templateUrl: 'sort-custom-icon-example.html', + imports: [MatSortModule, MatIcon], +}) +export class SortCustomIconExample {} diff --git a/src/material/sort/sort-header.html b/src/material/sort/sort-header.html index 6f119af50223..f5b308056348 100644 --- a/src/material/sort/sort-header.html +++ b/src/material/sort/sort-header.html @@ -32,9 +32,11 @@ @if (_renderArrow()) {
- + + +
} diff --git a/src/material/sort/sort-header.scss b/src/material/sort/sort-header.scss index c5ecfdae4500..feca45fa0edc 100644 --- a/src/material/sort/sort-header.scss +++ b/src/material/sort/sort-header.scss @@ -114,7 +114,7 @@ $fallbacks: m3-sort.get-tokens(); animation-duration: 0ms; } - svg { + > svg, [matSortHeaderIcon] { // Even though this is 24x24, the actual `path` inside ends up being 12x12. width: 24px; height: 24px; diff --git a/src/material/sort/sort.md b/src/material/sort/sort.md index 68cc4ff2c3f8..93c56a11b377 100644 --- a/src/material/sort/sort.md +++ b/src/material/sort/sort.md @@ -39,6 +39,13 @@ by default it will use the id of the column. +#### Customizing the icon + +You can set your own icon for a `mat-sort-header` by projecting in an element with the +`matSortHeaderIcon` attribute. + + + ### Accessibility When you apply `MatSortHeader` to a header cell element, the component wraps the content of the @@ -55,4 +62,4 @@ remedy this, use the `matSortChange` event on the `MatSort` directive to announc updates with the `LiveAnnouncer` service from `@angular/cdk/a11y`. If your application contains many tables and sort headers, consider creating a custom -directives to consistently apply `sortActionDescription` and announce sort state changes. +directives to consistently apply `sortActionDescription` and announce sort state changes.