why Fa ui-icon-3d-rotation can't display in my jhipster app

[qgzhiguo]

I integrate Ultima and jhipster App, and I intend to display icons in the page. Here is my code snippet.

<i class= "Fa fa-camera-retro fa-3x" ></i> fa-3x

<i class= "Fa ui-icon-3d-rotation" ></i>3d-rotation

However, the first icon in the web page can be displayed correctly, while the second can not be displayed.

In the debug mode, the viewer is displayed as <svg class= "svg-inline--fa fa-w-16 ui-icon-3d-rotation" aria-hidden= "true" data-prefix= "Fa" data-icon= "null".

Why data-icon= "null" and how to solve this problem?

[mert.sincan]

Could you please check the following css after selecting <i class= "Fa ui-icon-3d-rotation" ></i> using browser's selector in console;

Code: Select all

material-icons, .fa {
    font-family: 'Material Icons';
    ...

Could you please attach a screenshot showing the above css?

[mert.sincan]

Could you please make the following changes?

_icons.scss

Code: Select all

//line 1016
.material-icons {  /* please remove .fa class */
  ..
}

_mixins.scss

Code: Select all

//line 112
@mixin icon-override($icon) {
    &.fa {
        @include material-icon($icon);
    }
}

Then, please provide new theme css file using SASS command.