[Angular Material] 使用svg圖檔時圖片比例跑掉

General
1

大家好，最近剛開始使用Angular Material，目前在傳入svg圖檔的時候發生了一些問題

未命名-1
未命名-11920×922 97.3 KB

檢查過我的svg檔了，應該沒有問題
上網爬文後好像也沒看到類似的問題…
程式如下，再麻煩各位大大幫我查看一下，謝謝

【test.html】

<mat-icon class="menuicon" svgIcon="menu-svg:model"></mat-icon>
<mat-icon class="menuicon" svgIcon="menu-svg:mark"></mat-icon>
<mat-icon class="menuicon" svgIcon="menu-svg:merge_file"></mat-icon>
<mat-icon class="menuicon" svgIcon="menu-svg:record"></mat-icon>
<mat-icon class="menuicon" svgIcon="menu-svg:training"></mat-icon>
<mat-icon class="menuicon" svgIcon="menu-svg:validation"></mat-icon>

【test.componen.ts】

import { Component, OnInit } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {

    this.matIconRegistry.addSvgIconInNamespace(
      'menu-svg',
      'model',
      this.domSanitizer.bypassSecurityTrustResourceUrl('assets/images/model.svg')
    );

    this.matIconRegistry.addSvgIconInNamespace(
      'menu-svg',
      'mark',
      this.domSanitizer.bypassSecurityTrustResourceUrl('assets/images/mark.svg')
    );

    this.matIconRegistry.addSvgIconInNamespace(
      'menu-svg',
      'merge_file',
      this.domSanitizer.bypassSecurityTrustResourceUrl('assets/images/merge_file.svg')
    );

    this.matIconRegistry.addSvgIconInNamespace(
      'menu-svg',
      'record',
      this.domSanitizer.bypassSecurityTrustResourceUrl('assets/images/record.svg')
    );

    this.matIconRegistry.addSvgIconInNamespace(
      'menu-svg',
      'training',
      this.domSanitizer.bypassSecurityTrustResourceUrl('assets/images/training.svg')
    );

    this.matIconRegistry.addSvgIconInNamespace(
      'menu-svg',
      'validation',
      this.domSanitizer.bypassSecurityTrustResourceUrl('assets/images/validation.svg')
    );
  }

  ngOnInit(): void {
  }

}

※ css 只有設定圖片的長寬跟margin而已，拿掉css圖片一樣會跑掉

2

問題已解決

不使用mat-icon，直接使用img tag 圖片比例就正常了

 <img class="menuicon" src="assets/images/model.svg">