带有svgSet的Mat-Icon仅显示图像的一部分

Question

我正在尝试从SVG集中向我的项目添加一个Mat-icon。

在我的app.module中，我有以下代码-

import { MatIconModule } from '@angular/material/icon';

imports: [
  ...
  MatIconModule,
  ...
]

在我拥有的app.component中

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIconSet(
    sanitizer.bypassSecurityTrustResourceUrl('../assets/icons/icon-set.svg'));
  }
}

在我的HTML中，我像这样使用它-

<mat-icon svgIcon="Setting"></mat-icon>

应用程序加载后，将显示图标。但是这样显示-

为什么图像不能完全显示？我是第一次使用SVG图标。这些可以与字体配合使用-但我正在尝试将可用的字体从svg转换为svg。

我尝试做一个css transform：scale（0.7）来调整它的大小以适合它，以防图像对于容器太大。但这也不起作用。任何帮助表示赞赏。