Angular: Material Icons

Ikony to użyteczne elementy interfejsu użytkownika. Często na stronach lub aplikacjach internetowych są to zamienniki tekstu. Są bardzo intuicyjne - użytkownik nie musi się zastanawiać po prostu wie, że jak w to kliknie znajdzie to czego szuka.

Nic dziwnego, że twórcy często korzystają z ikon, w swoich aplikacjach. Nieraz korzystałem z Font Awesome.

Angular Material także oferuje spory zestaw ikon gotowych do użycia. Możesz używać ich nawet wtedy, gdy nie korzystasz z Angulara, ale o tym za chwilę.

Lista ikon

Zanim podam przykład, jak używać te ikonki warto najpierw poznać gdzie znajdziemy ich listę.

Listę ikon znajdziesz tutaj.

Ikony są podzielone na kategorie. Oczywiście jest wyszukiwarka do szybkiego dostępu do interesującej nas ikony.

Przykłady użycia

Kiedy w swoim projekcie aktywujesz obsługę angular material do pliku index.html dodawana jest linijka:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Ona wystarczy żeby zacząć używać tych ikon - i nie musi to być aplikacja napisana w Angularze!

Kiedy wejdziesz na stronę z listą kliknij na jakąś ikonę. Po prawej stronie wyświetli się panel. Zauważ, że każda ikona zawiera swój unikalny identyfikator. Na przykład dla ikony Menu będzie to: menu. Gdy chcemy użyć ikony piszemy:

<span class="material-icons">menu</span>

Czyli używam jakiegoś tagu HTML, korzystamy ze specjalnej klasy CSS, a na koniec używamy tego identyfikatora.

Jest jeszcze inny sposób na korzystanie ikon:

<mat-icon>menu</mat-icon>

Przy czym, żeby korzystać z tego zapisu musimy dodać dodatkowo specjalny moduł do naszej aplikacji:

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

@NgModule({
  exports: [
    MatIconModule
  ]
})	

Jak dołączać moduły z angular material znajdziesz tutaj.