Fluentui: Icons not showing except on Icon component

[LeonidasFettikus]

Hi guys, we are working on a project with a OUI Front End. I have a problem with the Icons not showing up on various components. We have been working on this since 1 1/2 years and it worked until I deleted the node_modules folder and did a npm install again. My colleague could confirm this, after he did a fresh npm install, the problem also appeared on his dev machine.

The weird thing is, when I use the Icon component, the icons do show up.

Any idea what's happening here?

package.json:

"devDependencies": {
    "@types/jquery": "~3.3.4",
    "@types/react": "16.4.1",
    "@types/react-dom": "^16.0.6",
    "@types/sharepoint": "^2016.1.1",
    "@uifabric/icons": "^6.0.1",
    "compression-webpack-plugin": "^1.1.11",
    "core-js": "^2.5.7",
    "css-loader": "^0.28.11",
    "date-fns": "^1.29.0",
    "jquery": "^3.3.1",
    "load-themed-styles": "^1.2.0",
    "node-sass": "^4.9.0",
    "office-ui-fabric-react": "^6.18.0",
    "raw-loader": "^0.5.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "systemjs": "^0.21.4",
    "ts-loader": "^4.4.1",
    "typescript": "~2.9.2",
    "webpack": "~4.12.0",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }

Here is a screenshot that shows what I mean, the mail icon is an Icon component, the other one a CommandBar with 3 icons:

This is the code that supplies the items to the CommandBar:

private getActions(): IContextualMenuItem[] {
    let cbState = this.state.enabledActions;

    return [
        { key: "add", name: "", icon: "Add", onClick: this.clickNew, disabled: cbState[0] ? false : true },
        { key: "edit", name: "", icon: "Edit", onClick: this.clickEdit, disabled: cbState[1] ? false : true },
        { key: "delete", name: "", icon: "Trash", onClick: this.clickDelete, disabled: cbState[2] ? false : true }
    ];
}

[dzearing]

Are you calling initializeIcons in your application?

https://github.com/OfficeDev/office-ui-fabric-react/wiki/Using-icons

[dzearing]

Also, do you have 2 copies of icons in your bundle for whatever reason? (maybe search for initializeIcons definition and see if there are 2 copies.)

[dzearing]

@LeonidasFettikus Let us know if that helped :)

[LeonidasFettikus]

Hi, sorry if I have gotten back so late. We didn't yet resolve the issue, but it has been moved back in our backlog and a colleague has hijacked the task of fixing this. Anyway, I can say that yes, we have called initializeIcons(); in our app and we only call it once.

It has worked before we updated our packages to their latest versions. I suppose we will try rolling back these updates to see if some dependency caused this issue.

[sunny-lan]

@LeonidasFettikus You need to do this:

return [
  { key: "add", name: "add", iconProps:{iconName:"Add"}, ... },
  ...
];

[Jahnp]

@LeonidasFettikus checking in here, are you still seeing this issue?

[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 Fabric React!