[Icon] Icon are resolved as text on IE

[durandx]

Icon are resolved as text on IE:

With IE :

Secondary action

🔴 Fail

Scroll to top:

🔴 Fail

With Firefox:

Secondary action

🔶 Still a z-index problem with Block component

Scroll to top:

✅ Success

[pierr]

Maybe a specific font file is missing. IE uses other fonts

[pierr]

https://google.github.io/material-design-icons/#icon-images-for-the-web

[pierr]

[pierr]

@Bernardstanislas @TomMaSS Any opinion on that?

[pierr]

Suggestion create a component Icon for ie9 with a mapping on components

[Bernardstanislas]

👍

[durandx]

For Info, I have the bug with the version 11 of IE

/xxx/static/fonts/fontawesome-webfont.eot? HTTP GET 200 application/vnd.ms-fontobject 59,59 Ko 32 ms @font-face 561 0 16 16 0 20467

[pierr]

Maybe the probem is your server which does not know how to serve this specific font file...
Font awesome provide sevral fonts.

[pierr]

@durandx Maybe you can check https://github.com/google/material-design-icons/tree/master/iconfont which should be in the associated package.json file

[durandx]

google/material-design-icons#205

[pierr]

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

[pierr]

This works on ie

[durandx]

Was working in our localhost and recette environnent.
Still working in localhost but not no more in recette environnement (google font update ?).

[pierr]

@Jerom138 maybe it is the same problem for old FF

[pierr]

@durandx Google has indeed published a new mdl lite version, we didn't upgrade in foocus components.

[pierr]

@pierbrisson

[Pandakls]

Got the issue on both IE and FF, what do i have to do to fix this ?

[xuaveneg]

Hi, I just updated focus-core and focus-components, and my icons are still not displayed on IE in recette environment (it works in localhost). How can I fix this ?

[TomGallon]

did you add this line in the header of your index.html or JSP file ?

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

[xuaveneg]

Sorry, now it's resolved.
The problem was that I didn't add material-design-icons-iconfont for IE compatibility.

[durandx]

Please can you explain what did you do in detail ?

[xuaveneg]

With webpack and scss-loader,
I added the node.js module material-design-icons-iconfont to my project.
I imported the module in a js file with

import 'material-design-icons-iconfont/dist/material-design-icons.scss';

and then it worked.

[durandx]

We have switched to webpack (from brunch) 2 or 3 month ago, and the font is now correctly inlined in the css along with some localhost:3000/xx.eot url. With Chrome and Firefox, the inlined is taken, but with IE11 (and 10) the font use the localhost:3000 url.
@xuaveneg Does your solution is working with IE 11 ?

[pierr]

@durandx I helped @JRLK with a similar issue last week it was due to webpack config.
Maybe @JRLK can comment the solution on this issue.

[JRLK]

@pierr We work only with Chrome not with IE.
The issue we looked together was about absolute and relative path to access to the fonts.
I don't think the issue @durandx is talking about is the same.

[durandx]

Linked to : #1125

[durandx]

Solution here : klee-contrib/webpack-focus#9