Fluentui: Dropdown CaretDown icon mising

Created on 27 Sep 2017  ·  3Comments  ·  Source: microsoft/fluentui

Bug Report

  • __Package version(s)__:5.0.1
  • __Browser and OS versions__: Chrome

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? ( No)

Requested priority: (High)

Describe the issue:

The CaretDown icon in Dropdown was missing
image

Actual behavior:

I used the Dropdown inside a Panel.
When render out the UI of Dropdown, the icon CaretDown was missing.
I was using the default Dropdown setting.

If compare the html in your site with the one i have render there is different in the component

image
this from https://developer.microsoft.com/en-us/fabric#/components/dropdown

image
this from mine render

from mine render the "i" was wrapped in a "span"

Expected behavior:

Dropdown with the CaretDown icon.

If applicable, please provide a codepen repro:

Question ❔

Most helpful comment

Yes, after add initializeIcons() , the icon was appear.
Please add the information on the website as this is a manual work needed by developer.
Currently i can't find any information for this in the website.

All 3 comments

Do you get a warning in the console like

The icon "caretdown" was referenced but not registered.

Maybe you need to add initializeIcons(); to your code
See https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/icons/README.md

Yes, please call initializeIcons() in your application startup. This will let you either use the default CDN, or provide your own if you want to host the fonts in your CDN.

This is the only way we can support partners to build things using Fabric, but not have to reference every possible icon. There are many cases where partners may not even want icons, and this solution supports that as well.

Can you please check if this fixes your issue?

Yes, after add initializeIcons() , the icon was appear.
Please add the information on the website as this is a manual work needed by developer.
Currently i can't find any information for this in the website.

Was this page helpful?
0 / 5 - 0 ratings