1

I experienced the weirdest problem connected to Internet Explorer so far. We are using d3 to display a chart and we have some icons rendered in the chart. We are using Office UI Fabric Icons. Unfortunately, some of the icons are not rendered and some are. For example, icons like "plus", "minus" or "chevron" are showing, but more complicated ones are not. In order to append the icon to the chart I am using the following code:

d3selection
        .append('text')
        .attr('dx', 40)
        .attr('dy', 20)
        .attr('fill', COLORS.inkLight)
        .attr('font-size', 12)
        .attr('font-family', 'FabricMDL2Icons')
        .style('cursor', 'pointer')
        .text('\uE8E3');

and I include link to the stylesheet as:

 <link 
      rel='stylesheet' 
      href='https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css'
 />

The code works normally in Chrome, Firefox and Edge, but not in Internet Explorer. The most weird part is that when I manually enter in the Developer Tools F12 and uncheck whatever CSS I find property I find anywhere in the page, the icons appear as if the manual CSS change triggers rerender of the page. I also added <meta http-equiv="X-UA-Compatible" content="IE=edge"> in the head, but it did not work. Any kind of help is appreciated.

ksav
  • 20,015
  • 6
  • 46
  • 66
Bojidar Georgiev
  • 29
  • 1
  • 1
    It seems like a strange decision to rely on a font to render an icon within SVG. Does the font work in IE11 outside of SVG? Take a look here https://forums.tumult.com/t/using-a-custom-web-font-within-an-svg-file/7254 – ksav Jan 31 '19 at 12:18
  • I fixed the issue by downloading the font file locally. It seems that IE didn't load the link to the stylesheets correctly. – Bojidar Georgiev Jan 31 '19 at 13:24
  • Have a look at this question: https://stackoverflow.com/questions/36253961/using-google-fonts-with-svg-object – ksav Jan 31 '19 at 13:36
  • 2
    @BojidarGeorgiev if you fixed it, write it down as an answer. – Coderino Javarino Jan 31 '19 at 14:17

0 Answers0