Como te mencionaron dificil precisar el problema al no tener tu codigo ni tu confIguracion
Sin embargo si la estructura es solida si esta bien configurada y como me intereso por ngx-datatable la cual nunca habia usado te muestro una configuracion que no trae problemas
Probe una aplicacion que tenga Angular Material
Icon+"@swimlane/ngx-datatable": "^20.0.0", En una estructura padre
hijo y con esta configuracion no hay problemas
// angular.json
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"./node_modules/@swimlane/ngx-datatable/themes/material.scss",
"src/styles.css"
],
No importar en /* styles.scss
/-->@import '~@swimlane/ngx-datatable/themes/material.scss';*
Padre
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AboutRoutingModule } from './about-routing.module';
import { AboutComponent } from './about.component';
import { LinksComponent } from './about/links/links.component';
import { InfoComponent } from './about/info/info.component';
import {MatIconModule} from '@angular/material/icon';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormsModule } from '@angular/forms';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@NgModule({
declarations: [
AboutComponent,
LinksComponent,
InfoComponent
],
imports: [
CommonModule,
// FormsModule,
//MatFormFieldModule,
MatIconModule,
NgxDatatableModule,
AboutRoutingModule
]
})
export class AboutModule { }
about-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about.component';
import { InfoComponent } from './about/info/info.component';
import { LinksComponent } from './about/links/links.component';
const routes: Routes = [
{
path: '',
component: AboutComponent,
children: [
{
path: 'links',
component: LinksComponent
},
{
path: 'info',
component: InfoComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AboutRoutingModule { }
about-routing.module
// package.json
{
"name": "ng-zone",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~12.2.0",
"@angular/cdk": "^12.2.13",
"@angular/common": "~12.2.0",
"@angular/compiler": "~12.2.0",
"@angular/core": "~12.2.0",
"@angular/forms": "~12.2.0",
"@angular/material": "^12.2.13",
"@angular/platform-browser": "~12.2.0",
"@angular/platform-browser-dynamic": "~12.2.0",
"@angular/router": "~12.2.0",
"@swimlane/ngx-datatable": "^20.0.0",
"express": "^4.17.2",
"rxjs": "~6.6.0",
"sse.js": "^0.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.2.2",
"@angular/cli": "~12.2.2",
"@angular/compiler-cli": "~12.2.0",
"@types/jasmine": "~3.8.0",
"@types/node": "^12.11.1",
"jasmine-core": "~3.8.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.3.5"
}
}
uno de los hijos info.component.html
<p>info works!</p>
<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>
index.html debe contener
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Tambien agregue codigo para la tabla en componente padre podes ver el codigo completo en github en github ruta about
que reconoce a mat-icon y a la tabla me intereso porque no habia probado a ngx-datatable por lo cual en github para ngx-datatable use un codigo de apuntes el cual debo actualizar pero comprueba que Angular reconoce tanto a Angular material como a ngx-datatable en la estructura
Otro problema que puede darse es si usate iconos personalizados mal configurados tenes este tutorial si es el caso aunque no creo ya que no deberian mostrarse en ningun componente iconos personalizados