Angular Material 提供了一个日期选择器组件，可以使用 mat-datepicker-toggle 元素来切换日期选择器的显示和隐藏。在点击切换图标时，可以通过添加点击事件来触发自定义逻辑。

下面是一个示例代码，演示了如何在点击切换图标时触发事件：

1. 首先，确保已经安装了 Angular Material，并导入所需的模块和组件：

import { MatDatepickerToggle } from '@angular/material/datepicker';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

2. 在组件的构造函数中注入 MatIconRegistry 和 DomSanitizer：

constructor(private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) {
  // 注册一个自定义的切换图标
  this.iconRegistry.addSvgIcon(
    'custom-icon',
    this.sanitizer.bypassSecurityTrustResourceUrl('path/to/custom-icon.svg')
  );
}

3. 在 HTML 模板中使用 mat-datepicker-toggle 元素，并添加点击事件处理程序：

  custom-icon

4. 在组件的类中定义 handleToggleClick 方法来处理点击事件：

handleToggleClick() {
  // 在此处添加自定义逻辑
  console.log('切换图标被点击');
}

在 handleToggleClick 方法中，可以添加任何自定义逻辑，例如显示/隐藏其他元素、改变日期选择器的样式等。

请注意，上述代码中的 custom-icon.svg 是一个自定义的 SVG 图标文件，您需要将其替换为您自己的图标文件路径。