<div class="app-card-title mb-4">
	<anglo-title-component title="Material"></anglo-title-component>
</div>		
<div class="card-wrapper" *ngIf="materialIcons && materialIcons.length>0">
	<div class="app-card">
		<mat-card>
			<div class="card-title mb-3">
				<h3>{{'New icons'|translate}}</h3>
			</div>
			<div class="card-content">
				<mat-list fxLayout="row wrap" >
					<mat-list-item *ngFor="let materialIconName of materialIcons" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
						<span class="icon-style"  fxLayoutAlign="space-between center">
							<div class="icon mr-2">
								<mat-icon matListIcon>{{materialIconName}}</mat-icon>
							</div>
							<div class="icon-name word-break"> {{materialIconName}}</div>
						</span>
					</mat-list-item>
				</mat-list>
			</div>	
		</mat-card>
	</div>
</div>