IssueRaiser

mat-icon shows text before showing properly

#### Bug, feature request, or proposal: Bug or feature request. #### What is the expected behavior? When using `<mat-icon>home</mat-icon>`, nothing should be displayed until the icon is loaded properly. As soon as the icon is loaded, it should render. #### What is the current behavior? Depending on the speed of your connection, it is possible, that you see the text (for example `home`) instead of the icon. #### What are the steps to reproduce? 1. Start the Angular Material Icon example in [Stackblitz](https://stackblitz.com/angular/yogqmggjokx). It might be better to open it in it's own tab. 2. Open the Developer-Tools (in Chrome) and under the `Network`-Tab choose a very slow network throttling profile. This is needed, as the sample app is very small and therefore the problem is not noticeable with normal connections. 3. Reload the page and wait until it is loaded. You will see something like this: ![image](https://user-images.githubusercontent.com/18258317/42627235-b224a5e2-85cc-11e8-89d9-29b94933423a.png) After some time it shows the icon: ![image](https://user-images.githubusercontent.com/18258317/42632653-2e332d8c-85de-11e8-95b2-5a18c09c5fcb.png) #### What is the use-case or motivation for changing an existing behavior? In an app I am currently working on, this happens pretty often. Even if I only change the route (which does not trigger a reload of the page) I often see the text of the icons before the icon is displayed properly, so it does not seem to be related t

Posted by probert94 on Jul 12, 2018, 12:17 PM

Tags

Related issues

Raise real-world problems, find people facing the same issue, and discuss solutions.4,000 issues0 comments

github (SaaS)

mat-icon shows text before showing properly

probert94Jul 12, 2018, 12:17 PM

#### Bug, feature request, or proposal: Bug or feature request. #### What is the expected behavior? When using `<mat-icon>home</mat-icon>`, nothing should be displayed until the icon is loaded properly. As soon as the icon is loaded, it should render. #### What is the current behavior? Depending on the speed of your connection, it is possible, that you see the text (for example `home`) instead of the icon. #### What are the steps to reproduce? 1. Start the Angular Material Icon example in [Stackblitz](https://stackblitz.com/angular/yogqmggjokx). It might be better to open it in it's own tab. 2. Open the Developer-Tools (in Chrome) and under the `Network`-Tab choose a very slow network throttling profile. This is needed, as the sample app is very small and therefore the problem is not noticeable with normal connections. 3. Reload the page and wait until it is loaded. You will see something like this: ![image](https://user-images.githubusercontent.com/18258317/42627235-b224a5e2-85cc-11e8-89d9-29b94933423a.png) After some time it shows the icon: ![image](https://user-images.githubusercontent.com/18258317/42632653-2e332d8c-85de-11e8-95b2-5a18c09c5fcb.png) #### What is the use-case or motivation for changing an existing behavior? In an app I am currently working on, this happens pretty often. Even if I only change the route (which does not trigger a reload of the page) I often see the text of the icons before the icon is displayed properly, so it does not seem to be related t

Comments (0)

No comments yet. Start the discussion.

Comment on this issue