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
Material icons are not showing up when used in a button
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
And which browser are you using? Does it work when you try it in our sample project?
Merve and I couldn't replicate it.
Merve and I couldn't replicate it.
Github Profile: https://github.com/mertsincan
-
- Posts: 5
- Joined: 24 Jan 2018, 14:56
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 ?
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 ?
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Could you please make the following changes?
_icons.scss
_mixins.scss
Then, please provide new theme css file using SASS command.
_icons.scss
Code: Select all
//line 1016
.material-icons { /* please remove .fa class. The old code: .material-icons, .fa {...}*/
..
}
Code: Select all
//line 112
@mixin icon-override($icon) {
&.fa {
@include material-icon($icon);
}
}
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 4 guests