<mat-icon> not work on edge browser

[SvenBudak]

Angular CLI: 6.0.8
Node: 8.11.1
OS: win32 x64
Angular: 6.0.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cdk                      6.3.0-c276e26
@angular/cli                      6.0.8
@angular/material                 6.3.0-c276e26
@angular/pwa                      0.6.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3

I used the <mat-icon> like this:

<button mat-icon-button>
    <mat-icon>remove_circle</mat-icon>
</button>

They work on Firefox and Chrome well, but on edge browser totaly buggy and invisible. Here you can see the Webseite to test and reproduce: https://expense-calculator.com/

[jtwotimes]

Can you reproduce the issue in a StackBlitz? The one I made works in both Chrome and Edge without issue, so I suspect there is something else going on.

[SvenBudak]

Hmmm i cant really reproduce to... Here it works fine: https://stackblitz.com/edit/mat-button-test But i checked all apps i did in last time and on every app is mat-icon broken... Cant understand why it work in stackblitz...

A friend also have the same issue with a app that he build last days.

Edit.: When i use <mat-icon svgIcon="thumbs-up"></mat-icon> it works fine.

[crisbeto]

Which icons are breaking for you? As far as I can tell, everything works on Edge:

[SvenBudak]

i use now on the live page <mat-icon svgIcon="thumbs-up"></mat-icon> with:

iconRegistry.addSvgIcon(
  'thumbs-up',
  sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));

Thats why you can see the icons in this site.

[jtwotimes]

Make if you're using the Material Icon ligatures, make sure you include the required HTML in your index.html, as documented here: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

[josephperrott]

Unfortunately without a reproduction case we won't really be able to investigate too much into the issue. If you can provide a stackblitz reproduction of the issue we should be able to look into it more.

[SvenBudak]

Yeah no problem. I dont understand why it works in stackblitz, i did exactly the same. but however, i think that including the svg icons is anyway a better way then including the whole icon lib. :)

[dmeagor]

Same problem here on edge after updating to latest version of angular material. It was working ok before I updated some modules including switching material from ~6.0.0 to ^6.4.3

{ "name": "shout", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "hmr": "ng serve --configuration hmr", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@agm/core": "1.0.0-beta.3", "@angular/animations": "~6.1.1", "@angular/cdk": "~6.4.2", "@angular/common": "~6.1.1", "@angular/compiler": "~6.1.1", "@angular/core": "~6.1.1", "@angular/flex-layout": "6.0.0-beta.17", "@angular/forms": "~6.1.1", "@angular/http": "~6.1.1", "@angular/material": "^6.4.3", "@angular/platform-browser": "~6.1.1", "@angular/platform-browser-dynamic": "~6.1.1", "@angular/pwa": "^0.6.1", "@angular/router": "~6.1.1", "@angular/service-worker": "~6.1.1", "angular-calendar": "^0.24.1", "angular-sortablejs": "^2.6.0", "chart.js": "^2.7.2", "chart.piecelabel.js": "^0.9.0", "classlist.js": "^1.1.20150312", "core-js": "^2.4.1", "hammerjs": "^2.0.8", "highlight.js": "^9.12.0", "lodash-es": "^4.17.5", "moment": "^2.20.1", "ngx-quill": "^3.4.0", "normalize.css": "^7.0.0", "quill": "^1.3.6", "rxjs": "^6.2.2", "rxjs-compat": "^6.2.2", "screenfull": "^3.3.2", "smooth-scrollbar": "^8.2.6", "sortablejs": "^1.7.0", "typings": "^2.1.1", "zone.js": "^0.8.20" }, "devDependencies": { "@angular-devkit/build-angular": "~0.7.0", "@angular/cli": "~6.1.2", "@angular/compiler-cli": "^6.1.1", "@angular/language-service": "^6.1.1", "@angularclass/hmr": "^2.1.3", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/node": "~9.4.6", "codelyzer": "~4.3.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~1.7.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.0", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.3.0", "ts-node": "~5.0.1", "tslint": "~5.9.1", "typescript": "~2.9.2" } }

[dmeagor]

rolling back angular material fixes everything.

[crisbeto]

@dmeagor are you using SVG icons or font icons?

[dmeagor]

Looks like 6.4.3 was added a short time ago, after upgrading from 6.4.2 everything's now working.

I simply ran npm install --save @angular/material @angular/cdk

[josephperrott]

Closing as we still have not be able to reproduce this issue on a supported browser.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}