Fluentui: Fabric Core Icons are being rendered instead of Fluent UI Icons

[GuiCavi]

Environment Information

• Package version(s):

{
    "dependencies": {
        "@fluentui/react": "^7.114.0",
        "@uifabric/file-type-icons": "^7.3.13",
        "@uifabric/react-cards": "^0.109.81",
    }
}

Please provide a reproduction of the bug in a codepen:

https://codepen.io/GuiCavi/pen/ExPozOo?editors=0010

Actual behavior:

Looks like some *Logo icons are being rendered as Fabric Core Icons instead of Fluent UI React. (haven't loaded the Fabric Core stylesheet)

<Icon
    iconName="OneNoteLogo"
    className={classNames.cardIcon}
    style={{ color: theme.palette.themePrimary }}
/>

Expected behavior:

If not loaded the Fabric Core stylesheet, should render the Fabric UI React Icons

<Icon
    iconName="OneNoteLogo"
/>

Priorities and help requested:

Are you willing to submit a PR to fix? No, I don't know the where is the problem

Requested priority: Normal?

Products/sites affected: Fluent UI React

[GuiCavi]

BTW, just found something weird.

I went into DocumentCard docs and the first image was loaded.

---

After, navigate to Icon docs and clicked on this link: For a list of icons, visit our icon documentation.

Navigate back to Icon docs (by history.back, not redirecting), and to DocumentCard docs. This way, I got the second image.

---

Here a gif to help

[paulgildea]

@GuiCavi - Can you file a separate issue for the website issue you found? That would be helpful for making traction on both issues.

@dzearing / @JustSlone - We don't have icon owner - so I'm bring this to your attention

[GuiCavi]

@paulgildea sure. I thought they were related... I'll fill another then. Thanks for the reply

[Vivihung]

I have the same icon issues, too.
These are the icons I got

But I was expecting this type of MS brand icons

My package.json

        "@fluentui/react": "7.105.10",
        "@fluentui/styles": "0.47.0",

React code example (same as @GuiCavi )

<Icon
    iconName="OneNoteLogo"
/>

[paulgildea]

Putting this back for investigation.

[xugao]

@GuiCavi - Currently brand icons are not supported by rendering using Icon component.

There are 2 ways you can use brand icon in your app:
you can do

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

<div class="ms-BrandIcon--icon96 ms-BrandIcon--word" />

or

<img src="https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/svg/word_48x1.svg" alt="Word product icon" />

[Vivihung]

Thanks for the dispatch, @paulgildea and the investigation, @xugao .
I will move my code to use the CDN image path.

By the wan, the documentation of the fluent UI really need some update in the brand icon section.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!

[GuiCavi]

Thanks for the investigation @xugao and @paulgildea

Oh okay, got it for the brand icons. The fact is that i wasn't trying to use brand icons. As you can see in the image below, there is an "brand icon" for OneNote in Fluent UI Core icons.

And if you check the Fabric Core icons, as below, there is a different one..

The problem is not the difference between them, is why when using Fabric UI Core I get Fabric Core icons.

I believe that was not exactly @Vivihung problem, since she needed to render brand icons.

[JustSlone]

@Vivihung, agreed on the brand Icon page needing an update! I'll spin up a quick fix to the example on the page based on @xugao's suggested fix here.

@GuiCavi, actually (and it took me an embarrassingly long time to realize this) I'm pretty sure these are the monochrome version of the new Office icons! (https://news.microsoft.com/europe/2018/11/29/say-hello-to-microsofts-new-office-icons/)

There is clearly a bug in the website showing the old icons, but https://uifabricicons.azurewebsites.net/ and Fluent UI React seem correct here.

[GuiCavi]

@JustSlone thanks for the reply.

Got it. So, just for resuming the issue: The icons that Fluent UI React is showing when we use it are the right ones and the icon doc is the one that needs some kind of fix, right? 😄

[JustSlone]

@GuiCavi that is my understanding. I'll check with some folks tomorrow to confirm.

[GuiCavi]

@JustSlone so, it kills my question. Feel free to leave this issue as open till the fix is done or you can close it. Thanks for the attention to all of the team! 😄

[JustSlone]

@GuiCavi thank you for the report! Can you open the separate issue for the website showing the old (or just inconsistent) monochrome brand icons? Then I can close this one out.

[JustSlone]

I've confirmed these are in-fact the monochrome versions of the new icons, closing this issue. Thanks!

[GuiCavi]

Can you open the separate issue for the website showing the old (or just inconsistent) monochrome brand icons?

@JustSlone, still needed to open another issue as you asked? Or you guys already aware of it? I can do it without problem.