Angular Material Icons Not Displaying

[Rossco8]

I have Angular Component testing up and running and everything is great, except I am unable to get my Angular Material Icons to display.
My setup is:

• Angular Material v14
• Cypress v12.6.0

I can see that my global styles (specified in my src/styles.scss are working, as the rending is correct. Also all the Angular Material components look correct. it is just the icons missing.

For example, this

<mat-icon class="info-icon">info</mat-icon> 

Is showing as this

info

The config files are:

cypress.config.ts is:

import { defineConfig } from "cypress";

export default defineConfig({
  component: {
    devServer: {
      framework: "angular",
      bundler: "webpack",
    },
    specPattern: "**/*.cy.ts",
  },
});

cypress/support/component.ts is

import './commands'
import { mount } from 'cypress/angular'

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount
    }
  }
}

Cypress.Commands.add('mount', mount)

Any suggestions for how to fix this?

[Rossco8]

I do not know what the correct (Cypress) solution is, but I found an SO answer that did the trick. Add this to beforeEach()

const materialIcons = document.createElement('link');
materialIcons.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
materialIcons.rel = 'stylesheet';
document.head.appendChild(materialIcons);

[dlanaras]

A bit late of a reply, but I've just recently had this error. I think I've found a more "cypressy" solution for this and that is adding <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/> inside the head tag of cypress/support/component-index.html. In case MatIcons are only needed for a single component test, then your answer is probably the best for that scenario.

[Scerbakova]

In my case I cant see icons because of CORS