Instead of the "filter-list" icon.
The 'filter-list' name is displayed in the icons page in the theme. When looking for the &#xxx; value on the material icons site, I noticed that they use filter_list (underscore) and that works in the the serenity theme too (might be an issue in all material based themes) and for other icons to.
But looking at the source of the serenity material icons page, I noticed you all explicitly use "ui-icon ui-icon-filter-list", so there is some kind of inconsistency using the 'shortcut' (or did I by accident use it wrong and now run into this.
Cheers
using 'material icons', icon="filter-list" displays the "filter" icon, a '-' and the 'list' icon.
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.
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Not sure if I understand it, how do you use it in code? can you post screenshots of what icon do you expect and what you get instead. ui-icon-* is a helper to use material icons with the PF components.
Sorry, should have added code...
This is what I initially had for a menuitem
I just used the name of the 'icon' in the serenity overview page
Which perfectly renders the materials icon with the folowing html client side
For another menuitem I wanted to use the 'filter-list' icon
In html this renders as
But displays as if
is rendered.
See https://screenshots.firefox.com/wlHhZz5 ... /127.0.0.1 (inline images not working)
changing the icon to (underscore instead of dash as I found out via the material icons site)
Makes it display a 'filter_list' icon instead of a filter icon, dash and list icon.
So I knowhere used the ui-icon-* format (did not seem needed until I started using ones with dashes in the name)
This is what I initially had for a menuitem
Code: Select all
<p:menuitem value="Dashboard" icon="dashboard" outcome="dashboard"/>
Which perfectly renders the materials icon with the folowing html client side
Code: Select all
<i class="material-icons">dashboard</i>
Code: Select all
<p:menuitem value="Filters" icon="filter-list" outcome="filters"/>
Code: Select all
<i class="material-icons">filter-list</i>
Code: Select all
<i class="material-icons">filter</i> - <i class="material-icons">list</i>
See https://screenshots.firefox.com/wlHhZz5 ... /127.0.0.1 (inline images not working)
changing the icon to (underscore instead of dash as I found out via the material icons site)
Code: Select all
<p:menuitem value="Filters" icon="filter_list" outcome="filters"/>
So I knowhere used the ui-icon-* format (did not seem needed until I started using ones with dashes in the name)
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
I see, ui-icon is mainly for buttons, for the Serenity Menu itself, you can just the name of the material icon from google site, sorry for the confusion. Will add this to docs.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Also, you need to add icon code instead of icon name for IE9 and below. Please examine this link; https://material.io/icons/
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 4 guests