Angular-cli: Angular 11: Material Icons are not rendered after build and they're displayed as text

Created on 31 Oct 2020 · 3Comments · Source: angular/angular-cli

🐞 bug report

Affected Package

The issue is caused by package @angular/material @angular/cli

Is this a regression?

Did this behavior use to work in the previous version?
Yes, the previous version in which this bug was not present was: @angular/cli 10.2.0, @angular/material 10.2.6

Description

After running ng build --prod and running the app from dist folder, the Material Icons are not rendered and they're displayed as text only.

It looks like the issue is in the generated dist/index.html file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>App Title</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <style type="text/css" title="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap">@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}</style>
  <style type="text/css" title="https://fonts.googleapis.com/icon?family=Material+Icons">@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;}</style>
<link rel="stylesheet" href="styles.ee97cfed8d37f1f7db6b.css"></head>
<body class="mat-typography">
  <wsa-root></wsa-root>
<script src="runtime.359d5ee4682f20e936e9.js" defer=""></script><script src="polyfills.9bf4dad123bd95dda86e.js" defer=""></script><script src="main.5e47e3685e9510010a74.js" defer=""></script></body>
</html>

In previous version, the dist/index.html file was generated as follows:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>App Title</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles.6c74a7e65f155112b6ba.css"></head>
<body class="mat-typography">
  <wsa-root></wsa-root>
<script src="runtime.acf0dec4155e77772545.js" defer></script><script src="polyfills.35a5ca1855eb057f016a.js" defer></script><script src="main.f9dfe992debe5a586ef2.js" defer></script></body>
</html>

🔬 Minimal Reproduction

I successfully reproduced the issue in my repo https://github.com/luixaviles/web-speech-angular. Just follow the next steps:

git clone -b 11.0.0-rc.1 https://github.com/luixaviles/web-speech-angular.git
npm install
ng build --prod
http-server dist/web-speech-angular

Then verify in your browser and take a look into dist/index.html vs index.html file.

🔥 Exception or Error

🌍 Your Environment

Angular Version:


Angular CLI: 11.0.0-rc.1
Node: 12.16.1
OS: darwin x64

Angular: 11.0.0-rc.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.0-rc.1
@angular-devkit/build-angular   0.1100.0-rc.1
@angular-devkit/core            11.0.0-rc.1
@angular-devkit/schematics      11.0.0-rc.1
@angular/cdk                    11.0.0-rc.0
@angular/material               11.0.0-rc.0
@schematics/angular             11.0.0-rc.1
@schematics/update              0.1100.0-rc.1
rxjs                            6.5.5
typescript                      4.0.5

Anything else relevant?
All relevant details are already described in the issue.

devkibuild-angular browser high broken bufix

Source