Stack Overflow
Stack Overflow

Questions tagged [mat-icon]

For questions about the element for Angular Material. When using this tag also include the more generic [angular-material] and [angular] tags where possible.

35 questions
0
votes
1 answer

Too much margin for placeholder when using mat-icon as matPrefix

For an Angular project using Material, I would like to add an input with a leading icon. When I do so (using mat-icon and matPrefix), the placeholder, in an outline appearance, gets extra (unwanted) margin on the start side (see images below). When…
nawrasg
  • 138
  • 3
  • 9
0
votes
0 answers

Error retrieving icon :xxxxx! Http failure response for mat-icon in Angular 14

I am trying to use custom svg for mat-icon in Angular using MatIconRegistery and DomSanitizer. But the following error is displayed in the console: Error retrieving icon :xxxx! Http failure response This is my app.component.ts file: import {…
Cynthia
  • 21
  • 6
0
votes
0 answers

How to navigate to another page and make the badge count empty, on click of mat-icon button?

Requirement: I am getting badge count based on API value. I want onclick of icon button it should navigate to another page and make the badge count empty. Problem: I am able to navigate to another page but badge count remains same its not becoming…
surabhi jain
  • 1
0
votes
0 answers

list of Mat-Icon when change one all changes Angular 12

enter image description here import { Component, OnInit,ViewChild, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; import { LoginService } from 'src/app/services/login.service'; import Swal from 'sweetalert2'; import {…
gueraini youcef
  • 1
  • 1
0
votes
2 answers

mat-icon Angular don't appear

I Import the Mat-Icon from Angular, but when i use then, he does not appear. Someone helps me? Below my code: app.module: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FlexLayoutModule…
Vinícius Kock
  • 5
  • 4
0
votes
0 answers

In Angular, using svg in mat-table cause errors

I'm using Angular 12 and Angular material and when I tried to use mat-icon svgIcon in a mat-table I got this error: ERROR TypeError: Cannot read properties of null (reading 'destroyed') at ViewContainerRef.move (core.js:23218:1) at…
Imad Che
  • 41
  • 1
  • 5
0
votes
0 answers

mat-icon is not a known element in angular even when I'm using the right method

I'm trying to use mat-icon but it shows me error :'mat-icon' is not a known element: If 'mat-icon' is an Angular component, then verify that it is part of this module. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the…
Fares Belaid
  • 1
  • 4
0
votes
1 answer

Storybook (Angular) can't retrieve icon registered with MatIconRegistry

My Angular application has a custom sprite of icons in the assets and it's correctly registered trough MatIconRegistry, since they show up throughout the entire platform without any problems. In the HTML file of each component I use
Sabel
  • 1
0
votes
1 answer

Use Angular Material mat-icon with custom svg icon in angular standalone library

I'm creating this angular library for a project, and inside it, i'm utilizing @angular/material mat-icon component. There is some custom svg files included as assets of library, and i want to register then with…
Mikael Thiago
  • 1
  • 1
  • 1
0
votes
1 answer

How to implement angle left icon on top of a tab like a badge?

I want to implement an angle left icon on top of a vertical column (as you see in the screenshot). This would be use to minimize the tab. Something similar to a badge but unlike a badge it should come over the tab. The vertical column consists…
Meenakshi
  • 31
  • 1
  • 7
0
votes
1 answer

How to Toggle a `` after reading a favorites array from the API

I am working on a project for a program I'm in, and I currently have a hiccup in my assignment. I am using Angular to build the program, and I have a small API I built to pull data from. The goal: to toggle the `favorite` to `favorite_border`…
Ethan
  • 29
  • 4
0
votes
0 answers

mat-icon doesn't show the icon dynamically in mat-tree sub item

I want to show icon before sub item but when I use it dynamically it doesn't show in my page. Here {{node.icon}} is not working. component.ts const TREE_DATA: RouteNode[] = [ { …
MD SHAFFAT
  • 59
  • 1
  • 7
0
votes
0 answers

How to display an icon (Angular material) Output not appearing after compiling

I have added and imported things for using mat-icon but I'm not having any output even if my codes got no errors after compiling. Here's what I did (btw I've used routing for my component) Angular-material version: 6.14.15 enter image description…
BeginnerProg
  • 11
  • 3
0
votes
1 answer

svg mat-icon doesn't render correctely

I have a simple div where i display three different icons that have different colors. Acctualy icons are displayed, but it shows all the time the same icons either attention-warning or attention-error icon, knowing that the html code contains…
Omar AMEZOUG
  • 958
  • 2
  • 14
  • 38
0
votes
1 answer

Angular material. error while importing MatIconRegistry

I'ma using 'Angular: 10.0.14' with '@angular/material 10.2.7' and while trying to import MatIconRegistry I get this error. ERROR in node_modules/@angular/material/icon/icon-registry.d.ts:51:22 - error NG6002: Appears in the NgModule.imports of…
Imad Che
  • 41
  • 1
  • 5
1
2
3