Issues with Angular Material Icons

Question

Angular 5+.

Angular CLI 1.7.4

Followed the setup here: https://material.angular.io/guide/getting-started

How I implemented material icons: https://stackoverflow.com/a/48281556/1052888

I can get some icons to show but there are inconsistencies. For example, this:

<button mat-icon-button>
    <mat-icon aria-label="Edit dashboard">bug report</mat-icon>
</button>

yields (blue outline on click shows just how off center it is):

When I click the pencil, the animated circle shows in the square part of the outline which upon inspection is the area of the button tag.

I'm not adding any additional styling at this point to cause this behavior.

I have also turned off Bootstrap to see if that was causing conflicting issues.

This one renders correctly:

<button mat-icon-button>
   <mat-icon aria-label="Edit dashboard">build</mat-icon>
</button>

yields (All the icons should be centered like this):

What I mean by centered is that I think they should be centered within the button tag like the build icon:

Some icons don't display at all:

 <button mat-icon-button>
        <mat-icon aria-label="Edit dashboard">aspect ratio</mat-icon>
 </button>

yields:

And yes, aspect ratio is listed as an icon on the Angular Material https://material.io/icons/

The blue line on click can be handled with span styling. Bootstrap is causing this.

The console reports a warning that not all material components may work correctly if a theme is present so I was sure to import into angular-cli:

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/material-design-icons/iconfont/material-icons.css",
        "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"

      ],

Update: I guess the icons are simply broke. on the Angular Material site itself, here, I changed the middle heart (favorite) to display the edit mode icon. The layout issue occurs here as well as certain icons not showing:

score 1 · Answer 1 · answered Jun 30 '19 at 07:06

All your setup is correct and the icons are not broken, the only problem is how you write the name of the icons.

The words that make up the icon name must be separated by an underscore (_).

So, for example:

instead bug report you should use bug_report. Icon link: https://material.io/tools/icons/?search=bug%20report&icon=bug_report&style=baseline
instead aspect ratio you should use aspect_ratio. Icon link: https://material.io/tools/icons/?search=aspect&icon=aspect_ratio&style=baseline

In Angular Material, the following code works properly:

<button mat-icon-button aria-label="">
    <mat-icon>bug_report</mat-icon>
</button>
<button mat-icon-button aria-label="">
    <mat-icon>aspect_ratio</mat-icon>
</button>

Demo here: https://stackblitz.com/edit/angular-m7sr4f

score 0 · Answer 2 · answered Jul 06 '18 at 07:33

0

maybe the problem is the name of the icon:

<button mat-icon-button>
    <mat-icon aria-label="Edit dashboard">report</mat-icon>
</button>

usually the icons names with 2 words, needs underscore character

like bug_report

answered Jul 06 '18 at 07:33

chinaski

116
1
7

score 0 · Answer 3 · answered Mar 04 '20 at 10:24

0

Following link provides the list of icons supported by angular material

https://www.angularjswiki.com/angular/angular-material-icons-list-mat-icon-list/

answered Mar 04 '20 at 10:24

Sunny

2,183
1
17
13

Issues with Angular Material Icons

3 Answers3