Having trouble getting material icons to function properly in Angular version 17?

Having trouble with displaying icons in Angular.

In the component.ts file:

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

@Component({
  selector: 'app-dashboard-space',
  standalone: true,
  imports: [
    MatIconModule,
  ],

And in the HTML file:

<div class="w-[20rem] h-[20rem] bg-yellow-100">
  <mat-icon>grade</mat-icon>
</div>

However, instead of seeing the icon, only "gra" text is displayed.

I have already executed 

npm install --save @angular/material
.

But no errors are showing in the console. Any suggestions on how to fix this issue?

angulartypescriptangular-materialangular17mat-icon

Answer №1

According to the guide on Getting Started with Angular Material,

The ng add command will also execute the following steps:

Include the Material Design icon font in your index.html

Make sure that the Material icon stylesheet is present in the index.html, if not, you will have to add it manually.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to wait for the state to be set before mapping the array

I have some data stored in an array (shown in the screenshot below) that I am trying to map, but I am facing issues accessing it as it is loaded asynchronously. How can I await the data? Is there a way to achieve this within the render function? render() ...

javascriptreactjstypescriptreact-native

I'm experiencing an issue with my website where it appears broken when I build it, but functions properly when I use npm run dev in Next

For my project, I have utilized NextJs, Tailwind, React, and Typescript. It is all set and ready to be hosted. After using "output: export" in next.config.js and running npm run build, the process was successful. However, when viewing my website locally, I ...

reactjstypescriptnext.jstailwind-css

Utilizing an array of data to create a complex structure with nested

In my Next.JS React project using TSX files, I have set up a data file like this: const fieldMapping = { category:[ { title: "Category 1", Subtitle: ["Category 1", "Category 2"], SubSubTitle: ["Category ...

reactjstypescriptnext.js

How to dynamically insert variables into a separate HTML file while creating a VS Code extension

Currently working on a vscode extension, I'm facing an issue with containing the html in a string (like this: https://github.com/microsoft/vscode-extension-samples/blob/main/webview-view-sample/src/extension.ts). It leads to a large file size and lack ...

htmltypescriptvscode-extensionsstring-interpolation

Selecting the appropriate enum to access a nested property within an object

I've come across a scenario that I find quite common, yet I haven't found an easy solution for. Here are the enums I'm working with (I've simplified them to just two values each, but keep in mind there are more in reality. The uniformi ...

reactjstypescriptenumstypescript-typingsobject-properties

When following the Redux container pattern, where do you think 'connect' should be placed - in the components or the containers?

Currently, I have all my connect statements in the containers, which requires me to connect all individual states and actions in one large @connect statement: @connect( (state: RootState): Pick<App.Props, 'state1' & 'state2' & ...

reactjstypescriptreduxreact-redux

Bespoke directive - Angular 2/4/5

Currently, I am using Angular 5 CLI but for some reason my custom directive is not working as expected. There are no errors showing up in the console either. I am trying to apply some styles to make the image fill the full width. Below are two different i ...

angularangular5custom-directive

Binding textarea data in Angular is a powerful feature that allows

I am looking to display the content from a textarea on the page in real time, but I am struggling to get the line breaks to show up. Here is my current code snippet: app.component.html <div class="ui center aligned grid">{{Form.value.address}}< ...

javascripthtmlangularangular2-databinding

Angular 6 - Resolving the Issue of 'Function calls are not supported in decorators' in Production Builds

Currently, I'm in the process of developing a cutting-edge Angular 6 application. However, as I was progressing with the development phase and tried to create a prod build using the following command: ng build --prod To my dismay, I encountered a pe ...

angularangular2-aotaot

`Is there a way to manage date formats across all components using a single method in Angular?`

I need assistance with controlling the date format of dates displayed in different components using one typescript file. How can I achieve this? app.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', ...

cssangulartypescript

Unknown Tag 'component-name' in Angular 2 Karma Test

Within my AppComponent, I have integrated the nav component into the HTML code, resulting in a visually appealing UI with no errors during ng serve or in the app console. However, upon running Karma for my project, an error is encountered: Failed: Templa ...

javascriptnode.jsangulartypescriptkarma-jasmine

Ensure Jest returns the accurate file paths for images in a TypeScript and React environment

I'm currently developing a React application and I have come across an issue with importing images. My usual method of importing images is as follows: import image1Src from 'assets/img1.png"; For testing purposes, I need to be able to make ...

reactjstypescriptimageimportjestjs

The datepicker is functioning correctly, however, the displayed value does not reflect the updated date

The version of angularjs being used is 1.5.11. Within my .NET MVC project, the bs-datepicker element from angularjs is incorporated. Featured below is the datepicker component accompanied by a pair of images functioning as buttons within my application: & ...

angularjstypescriptrazordatepicker

The program encountered an issue: Unable to access the 'push' property of a null object

I am facing an issue while trying to add an item to a list, and the error message is displayed below: import { Injectable } from '@angular/core'; // import { AngularFire, FirebaseListObservable, FirebaseObjectObservable, AngularFireDatabase } fr ...

javascriptangularfirebasefirebase-realtime-databaseangularfire2

Steps for registering an Angular application on a Eureka server

I'm trying to integrate my Angular application with a Spring Cloud Eureka server. I came across the eureka-js-client library, but I'm unsure about where to place the configuration settings. Additionally, there are methods like client.start() and ...

angularspring-bootspring-cloudnetflix-eureka

A helpful guide on showcasing error messages at the top of a form in Angular using reactive forms

I have a Validation summary component that is designed to fetch an ngForm, but it is currently unable to subscribe to status changes or value changes and display the summary of error messages. export class CustomValidationSummaryComponent implements OnIni ...

angularvalidationangular-reactive-formscustomvalidator

The element is implicitly defined as of 'any' type because a type of 'string' expression cannot be used to index an empty type

Having trouble with TypeScript here. It seems that I can't access accountProps using account in this map function export type AccountTypes = "TB1" | "GBB" | "MS1" | \"28D\" | "RS1"; type Acc ...

javascriptreactjstypescripttypescript-typingstypescript-generics

"Enhance your Angular application with seamless data manipulation by piping Observable

Currently, I am trying to pass an array value as a parameter to another function. The array is obtained from a subject: this.shopService.$getShops().pipe(map( shops => { console.log(shops[0]); } )).subscribe(); The subscription logic is implem ...

angularpipeobservable

What is the best way to transfer a value from *ngFor directive in Angular to the data-target attribute?

I was trying to create dynamic collapsible lists using Angular and the Bootstrap library. Since I didn't know how many lists there would be, I decided to use an *ngFor loop. However, I encountered a problem right at the start. I needed a way to identi ...

htmlangularbootstrap-4

The correlation between a TypeScript class and an interface bearing an identical name

I have been struggling to find clear documentation or explanation for the unique relationship between a TypeScript class and an interface that share the same name. What is the significance of having an interface with the same name as a class? Why does a ...

classtypescriptinterface