Page 1 of 1
Material icons are not showing up when used in a button
Posted: 14 Feb 2018, 21:37
by 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
Re: Material icons are not showing up when used in a button
Posted: 20 Feb 2018, 11:01
by 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?
Re: Material icons are not showing up when used in a button
Posted: 20 Feb 2018, 11:06
by 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.
Re: Material icons are not showing up when used in a button
Posted: 20 Feb 2018, 21:26
by 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 ?
Re: Material icons are not showing up when used in a button
Posted: 16 May 2018, 07:22
by 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.