Syncfusion for Angular and Angular material library

[Edvin]

Hi.

Can we use Angular material library (material.angular.io) and ejs2 for angular together in same application ?

Are there any conflicts using syncfusion's material.css (scss) together with material angular css (sass) ?

Is maybe material.css (syncfusion's) based on angular material css ?

Thanks for advance.

Edvin

[John Rajaram]

Hi Edvin, 

Greetings from Syncfusion. 

 

Query 1: Can we use Angular material library (material.angular.io) and ejs2 for angular together in same application? 

 

Yes. We can use material.angular.io and EJ 2 components in same application. 

 

Query 2: Are there any conflicts using syncfusion's material.css (scss) together with material angular css (sass)? 

 

No, there will not be any conflicts while using Syncfusion and material angular css. 

 

Query 3: Is maybe material.css (syncfusion's) based on angular material css? 

 

Essential JS 2 material.css files are based on Google material standard. 

 

Please let us know if you have any queries. 

Regards, 

John R 

[Edvin]

Hi.

Thanks for your answeres,

I start with testing. Everything in angular packages works perfect,

Except icons.

In all demos there is something like this iconCss="e-icons e-undo".

I know that e-icons and e-undo…. are defined in css files. 

But where.

What should i inlcude in project css file to have Access to e-icons and e-undo.

Can you put some light on this.

How is Metro studio related with this.

Should i use studio and select all icons i need and export it to sprites and then use it ?

Or you already created some frequetly used icons into default collections.

And last question.

What about icons used inside components ? For examle arrow up and down in grid (for sorting).

Are they included in component module css ?

Thanks for advance.

Edvin

[John Rajaram]

Hi Edvin, 

Thanks for the update. 

Please find the below details. 

Query 1: In all demos there is something like this iconCss="e-icons e-undo". I know that e-icons and e-undo…. are defined in css files. But where. What should i inlcude in project css file to have Access to e-icons and e-undo. 

Answer: 

In Essential JS 2, we have provided the support for font icons with the base64 embedded style format. You can refer the below documentation for more details. 

https://ej2.syncfusion.com/documentation/appearance/icons.html 

Query 2: How is Metro studio related with this. Should i use studio and select all icons i need and export it to sprites and then use it? Or you already created some frequetly used icons into default collections. 

Answer: 

Yes. You can also use the Metro studio support for creating custom font icon packages as per the requirement. 

Query 3: What about icons used inside components ? For examle arrow up and down in grid (for sorting). Are they included in component module css ? 

Answer:  

You can find the complete Essential JS 2 icons list in the following documentation. Please check the below online link for further information. 

https://ej2.syncfusion.com/documentation/appearance/icons.html#available-icons 

Let us know if you need any assistance on this. 

Regards, 

John R 

[Edvin]

Perfect answeres.

I didn't look at js documentation. 

Maybe you should put some links into angular documentation to point us to js documentation.

In js documentation there is much more info than in angular's.

So, if i understant example at https://ej2.syncfusion.com/documentation/appearance/icons.html?lang=typescript

we should manualy define class for icon, like:

 .e-search:before{
     content:'\e993';
} e-icons is already defined. If you define classes for each icon in e-icons this will be very practical. Or i missed something and there is already defined classes. Thanks for advance. Edvin

[Jesus Arockia Sankaran S]

Hi Edvin,  

Response for Query 1:Improved angular documentation will be available in our upcoming service pack release scheduled on October 30, 2018.  

Response for Query 2: We purposely avoid proving defined classes for icons as you mentioned to improve the customization and avoid the potential conflict with the classes used in components level.  

Please revert if any concerns.  

Regards,  

Jesus Arockia Sankaran S 

[Edvin]

Thanks,

I understand.

You can close this thread.

[Jesus Arockia Sankaran S]

Hi Edvin,  

  

Thanks for your update.  

  

Please get back to us if need any further assistance.  

  

Regards,  

Jesus Arockia Sankaran S