For questions about the
Questions tagged [mat-icon]
35 questions
6
votes
2 answers
Fix 'mat-icon' is not a known element error
I have an Angular project in which I'm trying to use the Angular Material library. In my app-routing.module I have this code:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {…
Newsha Nik
- 806
- 2
- 12
- 29
4
votes
2 answers
How to change mat-icon stroke width
I use custom icon with the default mat-icon with angular. Yet, the mat icon are a bit too thick compared to the one I've created.
I know those icons are treated like fonts, but is it somehow possible to change it like we change the stroke from an…
Raphaël Balet
- 6,334
- 6
- 41
- 78
1
vote
0 answers
Mat Icon not displaying svgIcon using addSvgIconSetInNamespace through MatIconRegistry
I have a single file with multiple svg inside, I register that file using MatIconRegistry in a IconsModule.ts file
@NgModule()
export class IconsModule {
constructor(
private _domSanitizer: DomSanitizer,
private _matIconRegistry:…
Isaías Orozco Toledo
- 1,919
- 5
- 19
- 35
1
vote
0 answers
Angular mat-icon overflows when applying padding
So I'm testing mat-icons and I'm trying to give them some hover effects, but it's not working as expected.
In my html I only have:
menu
And in my scss:
mat-icon {
padding: 0.3em;
border-radius: 50%;
transition:…
User
- 53
- 5
1
vote
0 answers
Mat-icon doesn't export in excel sheet?
I have used mat-icons to show in table in my project. but while exporting table to Excel or CSV changes to mat icon name instead of icon. I have attached code and image for more understanding.
mat-icon code
Bhautik Khunt
- 31
- 5
1
vote
1 answer
"mat-icon" doesn't work in the angular single-spa projects
I created an angular project from "single-spa" as the library and I implemented angular material inside the project. I used mat-icon but it doesn’t work. it doesn't show anything. And also I use a design kit and I took some components there but…
omercikayse
- 21
- 4
1
vote
0 answers
Angular - change the colour of selected mat-icons within a mat-tab-group
i have several tabs with different icons each, both from angular materials. if i change the colour of the icons via ::ng-deep it works, but it does not change the colour anymore when it is selected anymore.
::ng-deep .mat-icon {
color:…
leocibu
- 23
- 3
1
vote
2 answers
Mat-icon display based on condition in for loop
I have an angular-django app which makes an aPI call to a third-party application and returns json response. I am looping through the response and displaying the data in a table.
alucor-it
- 133
- 3
- 15
1
vote
1 answer
Using Mat-icons and Mat-content with *ngif - angular 12
In an angular template, I'm trying to create a table and within a particular column, based on the data, I'd like to show either a mat-icon or simply write "N/A"
I have 3 options -
Show "N/A" if it is not applicable
Show if the exam is…
Swaminathan K
- 37
- 1
- 8
1
vote
1 answer
Align mat-icon in a label
I need help aligning a mat-icon next to text in a label
Html:
Css:
label {
font-size: 0.6rem;
font-family: Verdana, sans-serif;
border-radius: 15px;
padding: 5px;
…
chichi
- 207
- 1
- 4
- 13
1
vote
1 answer
mat-icon right padding? Angular Material
Angular Material Icons:
I have a mat-icon that I want to be beside the text. Nothing I do will reduce the space between the icon and the text though.
Based on this HTML :
Ian Vink
- 66,960
- 104
- 341
- 555
0
votes
1 answer
why does directly passing svg url is not working for mat-icon in Angular?
This code works fine:
binder
- 13
- 3
0
votes
0 answers
Some material icons are not displayed like login/start material icons
i'm using angular material Icons (v14) and find out that some icons are not displayed in my project.
example of working mat-icon :
DreamRaja
- 1
- 1
0
votes
2 answers
Mat-icon keeps rules for ltr direction even when page is rtl
I'm working with an Angular v11 application which uses Material for mark-up.
I'm implementing changes to make my webpage right-to-left language proof.
One of the things that helps me with that is replacing all my margin-lefts to margin-inline-start…
Marijke
- 153
- 3
- 14
0
votes
0 answers
Mat Icon svgIcon load icon slowly
I have an SVG icon loading by Mat Icon but it loads the SVG slowly:
.ts
this.matIconRegistry.addSvgIcon(
'icon-info',
this.domSanitizer.bypassSecurityTrustResourceUrl('../img/icon-info.svg')
);
.HTML
Jaime Gómez
- 49
- 1
- 6