Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
luixaviles opened this issue Oct 31, 2020 · 3 comments · Fixed by #19275
Closed

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

luixaviles opened this issue Oct 31, 2020 · 3 comments · Fixed by #19275
Assignees
@alan-agius4
Labels
area: devkit/build-angular devkit/build-angular:browser freq3: high severity3: broken type: bug/fix
Milestone
Backlog

Comments

@luixaviles
Copy link

🐞 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.
@JoostK JoostK transferred this issue from angular/angular Oct 31, 2020
@alan-agius4 alan-agius4 self-assigned this Oct 31, 2020
@olcayusta
Copy link

If you delete the title property, there is no problem, for now I found such a solution.

@alan-agius4
Copy link
Collaborator

alan-agius4 commented Oct 31, 2020 •
edited

@olcayusta, indeed the title attribute is the problem here. Thanks for looking at this.

Will land a fix in the next day or two.

@ngbot ngbot bot added this to the Backlog milestone Oct 31, 2020
@alan-agius4 alan-agius4 mentioned this issue Nov 2, 2020
Merged
filipesilva pushed a commit that referenced this issue Nov 2, 2020
@alan-agius4 @filipesilva
fix(@angular-devkit/build-angular): remove title attribute from inlin…
e0875de 
…ed fonts style tag

title is not a valid style tag attribute.

Closes #19271
filipesilva pushed a commit that referenced this issue Nov 2, 2020
@alan-agius4 @filipesilva
fix(@angular-devkit/build-angular): remove title attribute from inlin…
880e251 
…ed fonts style tag

title is not a valid style tag attribute.

Closes #19271
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 3, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@alan-agius4 alan-agius4

Labels
area: devkit/build-angular devkit/build-angular:browser freq3: high severity3: broken type: bug/fix
Projects
None yet
Milestone
Backlog
Development

Successfully merging a pull request may close this issue.

fix(@angular-devkit/build-angular): remove title attribute from inlined fonts style tag
3 participants
@luixaviles @alan-agius4 @olcayusta