Use of Material Icons following the documentation - html

Question

I'm trying to implement and use material icons inside my angular 4 project, but i'm encountering a strange issue.
I have 2 different html files related to 2 differents modules:
interventi.component.html
sync.component.html
I've created a Material Module that imports and exports all the mat-components(modules) that i need, including the MatIconModule.
interventi.module.ts imports Material module.
sync.module.ts imports Material module.
Now listen to this :
1) In interventi.component.html i'm showing a material-icon with
<mat-icon aria-hidden="true" class="material-icons md-18" matSuffix (click)="customerModel = null">delete</mat-icon>
2) Inside sync.component.html I CAN'T DO THE SAME . Intellij recognize the tag but i will not see the icon, i will see "delete" as text, even if i try to copy all the code row shown above.
As the documentation of google says, I've put this link
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
inside my index.html.
Where i'm doing wrong?
I'm near to give in to common-use of material icons, putting the import link inside all the html.files that use material-icons.
I'm confused also by these twice methods to implement material icons...
For information completion, here's the Material Module:
import { NgModule } from '#angular/core';
import {CdkTableModule} from "#angular/cdk/table";
import {
[...others..],
MatIconModule,
[...others..]
} from '#angular/material';
#NgModule({
imports: [
[...others..],
MatIconModule,
[...others..]
],
exports: [
[...others..],
MatIconModule,
[...others..]
]
})
export class MaterialModule {}