Material icons are not showing up when used in a button

Post Reply
bstearns-tt
Posts: 5
Joined: 24 Jan 2018, 14:56

14 Feb 2018, 21:37

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
Posts: 354
Joined: 12 Sep 2017, 10:44

20 Feb 2018, 11:01

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?

User avatar
aragorn
Posts: 3283
Joined: 29 Jun 2013, 12:38

20 Feb 2018, 11:06

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
Posts: 5
Joined: 24 Jan 2018, 14:56

20 Feb 2018, 21:26

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 ?

User avatar
aragorn
Posts: 3283
Joined: 29 Jun 2013, 12:38

16 May 2018, 07:22

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.

Post Reply

Return to “Serenity - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest