Sapphire 12

Forum rules
Please note that response time for technical support is within 3-5 business days.
msbhalani
Posts: 27
Joined: 17 Sep 2016, 06:41

25 Oct 2021, 04:33

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?

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

25 Oct 2021, 12:44

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

msbhalani
Posts: 27
Joined: 17 Sep 2016, 06:41

25 Oct 2021, 14:52

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!

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

26 Oct 2021, 08:15

Hi,
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');
}
and adding override mixin or material-icons class declaration like the below code;

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';
    }

msbhalani
Posts: 27
Joined: 17 Sep 2016, 06:41

26 Oct 2021, 17:12

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!

msbhalani
Posts: 27
Joined: 17 Sep 2016, 06:41

30 Oct 2021, 06:19

Tried few other things but it is still not working. Thoughts?

Thanks!

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

01 Nov 2021, 09:46

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)
Image

2. Add font declaration in _fonts.scss file (assets/sass/_fonts.scss)
Image

3. Add material-icons class into your stylesheet (I added assets/sass/layout/_utils.scss file to try)
Image

4. And I tried inputgroup demo;
Image
Image

OMG :) I notice that you need to update your PrimeNG class, we removed ui- prefix.

Best regards,
Merve Özçifçi

msbhalani
Posts: 27
Joined: 17 Sep 2016, 06:41

05 Nov 2021, 06:40

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!

msbhalani
Posts: 27
Joined: 17 Sep 2016, 06:41

11 Nov 2021, 07:07

Can you please verify at your end, when possible using template (AS IS)? I think fonts are not loading but not sure what other things are missing.... How we can fix this?

Thanks!

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

11 Nov 2021, 09:17

Hi,

I tried your request (adding material icon to login page) and it works ;
Image

Also, I add a screenshot from developer tools that includes material class
Image

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
Best regards,
Merve Özçifçi

Post Reply

Return to “Sapphire - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest