Material icons are not showing up when used in a button

[bstearns-tt]

I've integrated the Serenity theme into an existing project. I've copied over the entire assets directory into my project as instructed. I've got primeng 5.2.0 in the package,json file and I've copied over the load of the theme-bluegrey and layout-moody into the index.html file.

When I attempt to create a button with icon using the following:

<button pButton type="button" icon="ui-icon-add" title="New" label="New" class="message-btn secondary-btn"></button>

The button renders, but there is no icon.

However, if I just include the icon by itself like so:

<i class="material-icons">add</i>

The icon renders fine.

What am I missing ?

Thanks, Bill

[merve7]

Please check you need to;
-Add assets/sass/theme/_icon.scss in your project.
-Import _icon.scss ( @import '_icons';) in assets/sass/theme/_theme.scss

Also, are there any errors in the development console?

[mert.sincan]

And which browser are you using? Does it work when you try it in our sample project?

Merve and I couldn't replicate it.

[bstearns-tt]

I'm using Chrome v64.0.3282.167

No errors in the dev console.

As I stated in my original post, I copied the entire assets directory into my project. So, I do have the assets/sass/theme/_icons.scss already imported in assets/sass/theme/_theme.scss.

I copied the entire assets directory as is, I did not make any changes to it.

It works fine when I run your sample project, yes.

(Update) The problem seems to be a conflict with font-awesome 4.7.0 which I also have in my project. If I remove the load of font-awesome from the angular-cli.json file "styles" attribute, your material icons show up with the buttons. Is this a known issue ?

[mert.sincan]

Could you please make the following changes?

_icons.scss

Code: Select all

//line 1016
.material-icons {  /* please remove .fa class. The old code: .material-icons, .fa {...}*/
  ..
}

_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.