Mat-Icon с svgSet отображает только часть изображения - PullRequest
0 голосов
/ 15 марта 2019

Я пытаюсь добавить значок mat в свой проект из набора svg.

В моем app.module у меня есть следующий код -

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

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

В приложении.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>

Когда приложение загружается, появляется значок.Но это отображается так:

enter image description here

Почему изображение отображается не полностью?Я работаю с SVG Icons в первый раз.Они отлично работают со шрифтами - но я пытаюсь переместить avay из шрифтов в svg.

Я попытался сделать css transform: scale (0.7), чтобы изменить его размер, чтобы он соответствовал, в случае, если изображение было слишкомбольшой для контейнера.Но это тоже не сработало.Любая помощь приветствуется.

...