Angular material - implementacja własnych mat ikon

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 2086 razy

Wstęp i instalacja modułu materiala

Angular posiada szereg ogólnodostępnych paczek, które rozszerzają jego możliwości. Do takich paczek należy @angular/material. Zainstalowanie tej paczki wymaga wpisania w konsoli:

npm install --save @angular/material @angular/cdk @angular/animations hammerjs --save

dzięki czemu paczka z repozytorium zostanie zainstalowana lokalnie w projekcie. Opcja --save sprawi, że zapisane zostaną w pliku package.json informacje o konieczności zainstalowania tej paczki przy wpisaniu polecenia:

npm install

którego używa się zawsze po ściągnięciu repozytorium czyjegoś projektu. Polecenie to instaluje wszystkie niezbędne zależności właśnie na podstawie danych zawartych w pliku package.json.

Warto też zwrócić uwagę na fakt, że zależności w pliku package.json są podzielone na dwie sekcje:

dependencies - zależności dla wersji produkcyjnej projektu;
devDependencies - zależności instalowane tylko dla wersji developersiekiej;

W następnym kroku należy dodać materiala do projekut:

ng add @angular/material --save

Co spowoduje wyświetlenie opcji:

? Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys)
> Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
  Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ]
  Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ]
  Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ]
  Custom

związanych z domyślnym stylem kontrolek materiala.

Tworzenie modułu importu

Teraz warto utworzyć sobie oddzielny moduł, w którym będą umieszczane importy wszystkich materialowych modułów. W tym celu w konsoli z poziomu folderu src/app wpisuję:

ng g m material

by następnie po chwili lub co najwyżej dwóch móc zaimportować moduł MatIconModule. Po modyfikacjach mój plik material.module.ts będzie wyglądał następująco:

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatIconModule} from '@angular/material'; @NgModule({ declarations: [], imports: [ CommonModule, MatIconModule ], exports: [ MatIconModule ] }) export class MaterialModule { }

Konieczne jest jeszcze zaimportowanie tego modułu w module głównym (w moim przypadku) a w bardziej rozbudowanym projekcie utworzony moduł materiala powinien zostać zaimportowany do każdego podmodułu, który będzie korzystał z materialowych komponentów.

Osadzanie standardowych ikon oraz rejestracja i osadzanie własnych ikon

Osadzanie podstawowych ikon

Po tych czynnościach można już przejść do dodania własnej ikonki. Zanim jednak to uczynię pragnę nadmienić, iż material ma własny wbudowany zestaw ikonek, które można znaleźć na stronie material.io/resources/icons. W celu użycia domyślnych ikon wystarczy napisać w kodzie HTML:

<mat-icon>done_outline</mat-icon>

Konieczne będzie jeszcze doinstalowanie owych ikon:

npm install material-design-icons --save

gdzie jak nie trudno się domyślić done_outline jest znacznikiem używanym do wstawienia jednej z domyślnych ikon. Znacznik ten można znaleźć na wcześniej wspomnianej stronie, która zawiera opis wszystkich dostępnych ikonek.

Przygotowanie i rejestracja własnych ikon

Ikony powinny być grafikami SVG z tego względu, że takie ikony po ustawieniu im koloru w stylu komponentu mat-icon będą zmieniały swój kolor wypełnienia. Jest jednak pewien haczyk. Otóż elementy graficzne zawarte w twojej ikonce będą zmieniały kolor jedynie wtedy, gdy elementy w niej osadzone nie będą miały nadanych styli wypełnienia. Jeżeli więc chcesz osadzić swój mały plik SVG utworzony np. w Inkscap-ie to musisz pousuwać te style. Oto przykład ścieżki zawartej w pliku SVG posiadającej style wypełnienia:

Po wyeliminowaniu styli:

Jak widać usunąłem nie potrzebny mi atrybut id oraz atrybut styli style.

Teraz, aby możliwe było zarejestrowanie własnych ikon trzeba dodać moduł HttpClientModule, który ja importuję w module głównym app.module.ts:

import { MaterialModule } from './material/material.module'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HttpClientModule } from '@angular/common/http'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, BrowserAnimationsModule, MaterialModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Teraz można zarejestrować własną ikonkę w pliku komponentu głównego app.component.ts:

constructor( private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer ) { this.matIconRegistry.addSvgIcon('play', this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/svg-icons/play.svg')); }

Osadzenie ikonki w kodzie:

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

Zmiana koloru ikonki:

<mat-icon style="color: red" svgIcon="play"></mat-icon>

Repozytorium na GitHub-ie zawierające wszystko, co potrzebne utworzenia własnych mat ikonek można znaleźć tutaj.

Strony powiązane