CODEWITHSUNDEEP
angularangular-material
SirBT
SirBT

Reputation: 1698

How do I correctly configure the material icons components to display icons?

Despite carefully following the steps as seen on https://www.youtube.com/watch?v=wI6kQAORiVg I am failing to get mat-icon to show in my Angular page. Kindly help me understand where I am going wrong.

Following are the steps I have taken in an attempt to add an icon to my Angular page.

I start by adding the stylesheet link to my angular index.html page

.../src/index.html

    <head>
    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="192x192" href="assets/img/logo.png">
    <!-- Stylesheet -->
    <link rel="stylesheet" href="assets/sax/css/base/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>

.../src/app/app.moudule.ts

The code in the app.moudule.ts file looks like the following:

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {
  MatIconModule,
  MatTabsModule
} from '@angular/material';


@Injectable()
export class Http {}

@NgModule({
    imports:     [
        BrowserAnimationsModule,
        MatIconModule,
        AgmCoreModule.forRoot({
            apiKey: 'xxx',
            libraries: ["places"]
        }),
      MatTabsModule,
      MatToolbarModule
    ],
    declarations: [ AppComponent, MainComponent],
    providers: [RoutingState, AppService {provide: Http, useValue: axios}],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

And finally, the HTML app page that gets generated:

.../src/app/main/staff/initiation/initiation.component.html

<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">

  <mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>

</section>

Upvotes: 1

Views: 2946

Answers (2)

nash11
nash11

Reputation: 8650

To configure mat-icon properly, you need to import MatIconModule and include the fonts, both of which you have already done. The reason your mat-icon is not working correctly is that it isn't being used correctly in your HTML.

To make it work, you need to add the string in between the mat-icon tags. To correctly display the thumb_up icon, try this.

<mat-icon aria-hidden="false" aria-label="Example thumbs up SVG icon">thumb_up</mat-icon>

Search for the available icons here and replace the thumb_up text with your desired icons.

Upvotes: 2

DaggeJ
DaggeJ

Reputation: 2191

The way I know about getting mat-icon to work is to use it like this;

<mat-icon>alarm</mat-icon>

...that is a string identifier between the tags for the image you want. Rest of your setup seems fine.

Hope this helps.

Edit

Appearently you can register svgIcons in the MatIconRegistry service. Your example is apparently based on this approach;

constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
        'thumbs-up',
        sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));
  }

Code above taken from the angular material icon examples. I guess I still prefer to use the string literals as described in my first answer though.

Upvotes: 1

Related Questions