I am in process of upgrading 9.x to 12.x.... How can I use material icons all over the project? Is there any documentation available?
Tried few following things from the available forum but no luck so far. Can you please advise as soon as possible?
Sapphire 12
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.
Hi,
You can see these topics and follow the steps;
viewtopic.php?f=75&t=66172
viewtopic.php?f=100&t=65362&p=188769&hi ... ns#p188769
If you face any issues, please send your issue or which step.
Best regards,
Merve Özçifçi
You can see these topics and follow the steps;
viewtopic.php?f=75&t=66172
viewtopic.php?f=100&t=65362&p=188769&hi ... ns#p188769
If you face any issues, please send your issue or which step.
Best regards,
Merve Özçifçi
I tried to follow mentioned steps... please see below images.
https://ibb.co/vxZKHdS
https://ibb.co/RSw8QV2
https://ibb.co/zHsHyQs
Not sure what is missing?
Thanks!
https://ibb.co/vxZKHdS
https://ibb.co/RSw8QV2
https://ibb.co/zHsHyQs
Not sure what is missing?
Thanks!
Hi,
Do you implement this step; 'add material style in your stylesheet'?
adding font declaration
and adding override mixin or material-icons class declaration like the below code;
Do you implement this step; 'add material style in your stylesheet'?
adding font declaration
Code: Select all
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url("../fonts/MaterialIcons-Regular.eot"); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url("../fonts/MaterialIcons-Regular.woff2") format('woff2'),
url("../fonts/MaterialIcons-Regular.woff") format('woff'),
url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
}
Code: Select all
@mixin material-icon($icon) {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 1.5em; /* Preferred icon size */
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
text-indent: 0;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
&:before {
content: $icon;
}
}
@mixin icon-override($icon) {
@include material-icon($icon);
}
//or
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: $iconFontSize;
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
Yes, I had override in mixin.... I added material-icons class declaration but still no luck.
Attached images for your reference.
https://ibb.co/64zWnBr
https://ibb.co/gJX8SHq
Thanks!
Attached images for your reference.
https://ibb.co/64zWnBr
https://ibb.co/gJX8SHq
Thanks!
Hi,
Do you check your project includes font files and loads font files, you can check from the network tab in developer tools?
I tried steps for you and it works with only four steps. Also, I write these steps the below;
1. Add font files into fonts folder (assets/layout/fonts)
2. Add font declaration in _fonts.scss file (assets/sass/_fonts.scss)
3. Add material-icons class into your stylesheet (I added assets/sass/layout/_utils.scss file to try)
4. And I tried inputgroup demo;
OMG I notice that you need to update your PrimeNG class, we removed ui- prefix.
Best regards,
Merve Özçifçi
Do you check your project includes font files and loads font files, you can check from the network tab in developer tools?
I tried steps for you and it works with only four steps. Also, I write these steps the below;
1. Add font files into fonts folder (assets/layout/fonts)
2. Add font declaration in _fonts.scss file (assets/sass/_fonts.scss)
3. Add material-icons class into your stylesheet (I added assets/sass/layout/_utils.scss file to try)
4. And I tried inputgroup demo;
OMG I notice that you need to update your PrimeNG class, we removed ui- prefix.
Best regards,
Merve Özçifçi
Thank you for verification. I tried everything including suggested ui-* updates....
Finally, I took template - sapphire-ng-12.0.0.zip (as is - no other changes) and followed steps suggested and still does NOT work. Please see attached images for your reference.
https://ibb.co/tP0G13y
https://ibb.co/hRVzNZJ
https://ibb.co/D1Y872R
https://ibb.co/NnhmJwt
Can you please advise for this (just to test - need to display icon in login page)?
Thanks!
Finally, I took template - sapphire-ng-12.0.0.zip (as is - no other changes) and followed steps suggested and still does NOT work. Please see attached images for your reference.
https://ibb.co/tP0G13y
https://ibb.co/hRVzNZJ
https://ibb.co/D1Y872R
https://ibb.co/NnhmJwt
Can you please advise for this (just to test - need to display icon in login page)?
Thanks!
Hi,
I tried your request (adding material icon to login page) and it works ;
Also, I add a screenshot from developer tools that includes material class
I have only one suggestion or question. Do you generate CSS file after adding new styles? Sass command to generate again CSS file;
Best regards,
Merve Özçifçi
I tried your request (adding material icon to login page) and it works ;
Also, I add a screenshot from developer tools that includes material class
I have only one suggestion or question. Do you generate CSS file after adding new styles? Sass command to generate again CSS file;
Code: Select all
sass --watch src/assets:src/assets --no-source-map
Merve Özçifçi
-
- Information
-
Who is online
Users browsing this forum: No registered users and 8 guests