square instead of some icons

[liesislukas]

"@blueprintjs/core": "1.16.0", Chrome on OS X El Capitan

most of the icons do work, except some, e.g.:

pt-icon-small-tick (pt-icon-tick does work)

I get this instead of the icon:

It does work for the development machine, but when I build with production flag it fails to that square

I haven't changed font family, but Icons16 font was missing inside CSS after build step who knows why.

I've fixed icons with this line in my custom css file:

.pt-icon-standard {
    font-family: Icons16 !important;
}

[andrerfneves]

Facing the same issue but in development:

Unfortunately overriding the CSS with a custom important flag has not fixed this for me. Anyone faced this before?

[llorca]

@giladgray you've seen that I believe?

[giladgray]

i mean this suggests fonts aren't loading, which is probably an environment issue, not a blueprint bug.

@andrerfneves seeing this in development suggests the font files are not being served correctly. you'll have to dig into your build environment. i suggest google.

@liesislukas perhaps your production build is doing some optimization that removes the font-family declaration? again, this speaks to an environment issue (not blueprint).

[andrerfneves]

@giladgray I resolved it. Importing issue. Thanks!

[liesislukas]

@giladgray maybe, haven't gone that far to clear the fog around it. It's interesting, that some icons were working well and some not. I assume (Bad Practice™) if it would be in build step all icons wouldn't work. If this issue is found only in my environment probably it's on my side anyways. One more assumption🤘

[colinbr96]

@andrerfneves
I know it's been a while since you commented but could you elaborate on how you fixed this bug? I have the same issue after upgrading to Blueprint 2

[andrerfneves]

@colinbr96 it has been a long time since I touched the codebase for the application that used Blueprint, but I believe we decided to import the styles files directly. It's for another company I did work for so unfortunately I no longer have access to the codebase in order to check it out for you.

[giladgray]

@colinbr96 in 2.0, we moved icon fonts and styles to a separate @blueprintjs/icons package, so you probably need to import its CSS file into your app, before blueprint.css

[kalekseev]

@giladgray sorry maybe I'm missing something but docs states that

The Icon component now renders SVG paths and the icon classes are no longer used by any Blueprint React component. Icon font support has been preserved but should be considered a legacy feature that will be removed in a future major version.

but select component still requires that Icon16 font to be loaded.

So should we expect updated select component that don't need Icons16 font in near future?

[giladgray]

@kalekseev good eye, the CSS API for the <select> HTML element does not support the SVG icons (they are JS only). we also don't have a React component for that CSS API (we do have the much more powerful Select component though!) so it falls into that "support has been preserved" bucket.

[kalekseev]

@giladgray can't we use svg for that https://jsfiddle.net/elky/t6kmLbzo/? Select is the only control that doesn't work without Icons16 (at least in my experience with v2.0). Loading the whole file for one icon seems too wasteful.

[giladgray]

@kalekseev it's not that simple as SVG icons are only available through React APIs (not pure CSS) since it requires a lookup in a huge JS object. there is currently no React component for the <select> HTML tag, so the CSS font remains. would happily accept a PR for a HTMLSelect component that uses Icon instead of the CSS class.