要解决Angular mat-icon无法渲染带有遮罩的SVG的问题，可以使用CSS样式来覆盖mat-icon的默认行为。下面是一个解决方法的代码示例：

1. 在组件的CSS文件中定义一个新的类，用于覆盖mat-icon的样式：

.custom-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  mask-size: cover;
  mask-image: url('path/to/your/svg.svg');
  background-color: #000; /* 遮罩的颜色 */
}

2. 在组件的HTML模板中使用新的类来替代mat-icon：

3. 如果你希望根据条件动态显示不同的SVG图标，可以在组件的.ts文件中定义一个变量，并使用ngClass来动态添加或移除自定义类：

import { Component } from '@angular/core';

@Component({
  selector: 'app-icon',
  templateUrl: './icon.component.html',
  styleUrls: ['./icon.component.css']
})
export class IconComponent {
  showCustomIcon: boolean = true;
}

4. 在模板中使用ngClass来根据变量的值来添加或移除自定义类：

这样，就可以使用自定义的CSS样式来渲染带有遮罩的SVG图标。