Замените мат-иконку SVG графикой

Question

Угловой новичок здесь ... Может ли кто-нибудь направить меня в правильном направлении, как я мог бы правильно заменить существующие иконки материалов на пользовательские, точнее с графикой SVG? Примерно так:

Итак, это:

<mat-icon class="mat-icon-rtl-mirror">
     {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>

С этим:

<mat-icon class="mat-icon-rtl-mirror">
     {{nestedTreeControl.isExpanded(node) ? 'INSERT_SVG_1_HERE' : 'INSERT_SVG_2_HERE'}}
</mat-icon>

Answer 1

Это не совсем решит вашу проблему, потому что вам нужно будет использовать аргумент svgIcon для the mat-icon элемента вместо использования innerText из mat-icon, но в противном случае он работает:

1. Вы должны разрешить angular импортировать из svg, объявив модуль.
2. Чтобы импортировать / встроить значки в javascript, вам придется переопределить загрузчик. Это может быть достигнуто с помощью raw-loader.
3. Теперь вы сможете импортировать svg в угловые и зарегистрировать их через MatIconRegistry;

Как пример:

// src/typings.d.ts

declare module '*.svg' {
  const svg: string;
  export default svg;
}

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DomSanitizer } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { MatIconModule, MatIconRegistry } from '@angular/material';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

import thumbsUp from '!!raw-loader!./thumbs-up.svg';

@NgModule({
  imports:      [ 
    BrowserModule, 
    FormsModule, 
    MatIconModule 
  ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIconLiteral(
        'thumbsUp', sanitizer.bypassSecurityTrustHtml(thumbsUp));
  }
}

// src/app/app.component.html
<mat-icon svgIcon="thumbsUp"></mat-icon>

// src/app/thumbs-up.svg
<svg>...</svg>

Другим подходом будет установка @mdi/svg

npm install @mdi/svg

и затем выполните шаги, описанные выше, с разницей для импорта каждого необходимого значка, например, expand_more и chevron_right

так в src/app/app.module.ts

// src/app/app.module.ts
...
import expandMore from '!!raw-loader!@mdi/svg/svg/chevron-down.svg';
import chevronRight from '!!raw-loader!@mdi/svg/svg/chevron-right.svg';
...
export class WeddingDayModule {
  constructor(
    private iconRegistry: MatIconRegistry,
    private sanitizer: DomSanitizer
  ) {
    iconRegistry
      .addSvgIconLiteral('chevron_right', sanitizer.bypassSecurityTrustHtml(chevronRight))
      .addSvgIconLiteral('expand_more', sanitizer.bypassSecurityTrustHtml(expandMore));
  }
 }

А в html просто для упрощения ... но вы поймете идею ...

//src/app/app.component.html
...
<mat-icon [svgIcon]="expanded ? 'chevron_right' : 'expand_more'" (click)="expanded = !expanded"></mat-icon>
...

Недостатком этого подхода является то, что вам придется регистрировать все значки, которые вы хотите использовать ... Но, по крайней мере, вы остаетесь в той же области изменений. Вместо использования лигатур вы можете изменить их все через svgIcon, и вы получите больше значков, чем просто значки, которые хранятся в устаревшей библиотеке material-design-icons.

Надеюсь, это поможет

Answer 2

Вы можете использовать angular-svg-icon

angular-svg-icon - это сервис и компонент Angular 7, который предоставляет средства для вставки файлов SVG, чтобы их было легко стилизован под CSS и код.

Сервис предоставляет иконку регистрации, которая загружает и кэширует SVG индексируется по его URL. Компонент отвечает за отображение SVG. После получения svg из реестра он клонирует SVGElement и SVG для внутреннего HTML-кода компонента.

Для получения дополнительной информации: https://www.npmjs.com/package/angular-svg-icon

Answer 3

Если это не часть значков материала, почему бы не использовать его как обычное изображение.Просто используйте его как обычный тег изображения:

<img src="{{nestedTreeControl.isExpanded(node) ? 'path_to_svg_file_1.svg' : 'path_to_svg_file_2'}}">