Using Sidebar Menu Example.. Add Custom Icons... NOT E-ICONS

Question

Hello,Using this part of the sample;SFMENU====================================================public List MainMenuItems = new List{        new MenuItem {      Text = "Blazor Default Project", IconCss = "icon-user icon",                Items = new List {====================================================I get the whole "open-iconic" usage...My goal is to use my icons not ones inside of a font libraryOf course there are design constraintsSo how do I put my own Icons in place of using the Syncfusion include versions?  Again individual icons ... 16x16 colored .. ex:  house.ico*** I have also created a Font Library, but have tried diff ways of using it, but have not succeeded.  It also , even though it has different naming convention conflicts with Iconic..  When I try and import in the site.css file it causes a problem with the other 'fontello'So I need to use my own icons not what is provided.  Please provide steps to do this...Finally I kept digging and I came across your 'Metro Studio' but still I need steps to implement as well as use my own.  Also please include limitations of size, colors etc..RegardsTom

Mohan Kumar Ramasamy · Accepted Answer

Hi Tom, Thanks for your update. We can achieve your requirement using open-iconic icons in Blazor application. Please refer the below code snippets. Index.razor

@code{ private List menuItems = new List{ new MenuItem { Id="Line", Text = "Dial", IconCss = "oi oi-file", Items = new List { new MenuItem{ Text = "Dial pad ..." }, new MenuItem{ Separator=true}, new MenuItem{ Text = "Provisioning" }, new MenuItem{ Text = "Accounts" }, new MenuItem{ Text = "Network Services" }, new MenuItem{ Text = "IT Help Desk" }, new MenuItem{ Text = "Customer Subscriptions Team" } } } }; } @font-face { font-family: 'Icons'; src: url('../fonts/open-iconic.eot'); src: url('../fonts/open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('../fonts/open-iconic.woff') format('woff'), url('../fonts/open-iconic.ttf') format('truetype'), url('../fonts/open-iconic.otf') format('opentype'), url('../fonts/open-iconic.svg#iconic-sm') format('svg'); font-weight: normal; font-style: normal; } .oi { position: relative; top: 1px; display: inline-block; speak:none; font-family: 'Icons'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .oi:empty:before { width: 1em; text-align: center; box-sizing: content-box; } .oi-file:before { content:'\e067'; } For your reference, we have prepared a sample based on this, please refer below link. Link: https://www.syncfusion.com/downloads/support/forum/156834/ze/156834-BlazorApp11061481208 Query: 'Metro Studio' does not allow you to drop "ex: home.svg file" into the tool Currently this support not available in Metro Studio. Pease let us know if you need any further assistance. Regards, Mohankumar R

Mohan Kumar Ramasamy · Answer

Hi CodeChaser, We have checked your reported query. We can achieve your requirement using Metro Studio. Please refer the creating your own icon font using Metro Studio. Link: https://www.syncfusion.com/blogs/post/creating-your-own-icon-font-using-metro-studio.aspx For your reference, we have prepared a sample based on this, please refer the below sample link and code snippets. Link: https://www.syncfusion.com/downloads/support/forum/156834/ze/F156834-BlazorApp1-1690494417 SfMenu Items="@menuItems"> @code{ private List menuItems = new List{ new MenuItem { Text = "File", IconCss = "Project1 sf-icon-agreement-01", Items = new List { new MenuItem { Text= "Open"}, new MenuItem { Text= "Save" }, new MenuItem { Separator= true }, new MenuItem { Text= "Exit" } } } }; } Please let us know, if you need any further assistance. Regards, Mohankumar R

CodeChaser · Answer

Hi Mohan,Thx for the really quick reply.  I do not want to use the icons in 'Metro Studio' I want to use my own.  Which tells me I cannot use SFMenu since  'Metro Studio' does not allow you to drop "ex: home.svg file" into the tool.  It only allows what is included.  Unless I missed an option in 'Metro Studio'.  I have a reasonable understanding of the complexities involved in what can be created in a raster format.  Using 'IcoMoon.io' tool to convert one of the svg icons, my customer wanted, ended up with 38 'paths'  (.path38:before ) etc..  For just one icon! This was scaled to 48x48.  But still almost non-glyph do to the number of colors.  "NOTE: edit a forum thread does not allow upload!" Toolbar has the same limitation...  Or is it a feature... It guarantees the ability to scale, but I am writing a LOB enterprise application and have no need to scale dynamically.  The app is designed for tablets and desktops 1080p.  These are the customer requirements.  1. Server App - in progress2. Port to PWA as much as possible3. Design Mobile phone app with different Blazor UI !   - now this where Syncfusion will be fine!  Using the glyphs will be the best way to go..Wow bummer I really like SyncFusion's design.  So I can still use the;- Grid- Sidebar 'hamburger icon' is fine- and a few othersBut any Syncfusion components that only use icons from  'Metro Studio' will probably not be usable :(   It all depends where they are needed in the app.  This current screen image includes the SidebarMenu, which the 'Menu' portion now has to be pulled, and I have to write my own menu "bummer"!  Looks like I will be getting a lot experience with the "IJSRuntime" Javascript interop.  Please notice the 'CSS Grid' usage.  I am hoping in a couple of weeks I will be able to upload to GitHub while the application is generic enough where the customer does not mind.  You will see I used the Grid into the project folders as well.   It is so easy to maintain.  I can't wait for ".Net 5.0" and "CSS Isolation"!As shown I break out all of my code to separate files.   Ignore the 'LeftSide.css' as it does not work yet, I have a separate gridlayout.css that handles everything.  No matter I have a lot of work to do and I plan to leverage SyncFusion where ever I can.  I expect by the time it is in Azure in 'beta' will be the end of the year, as I am also doing another project using ".Net Framework webforms" in a maintenance developer mode.  Not enough time in the day.Thanks again Mohan,Tom

CodeChaser · Answer

Mohan,I got an idea and actually something I should have mentioned.   In reference to the screen snapshot I this thread, all of the controls on the toolbar and menu are SyncFusion's buttons, menu and textbox are SyncFusion's components.  I was able to dig and dig and dig to find the right (  .e-? &/or # id's class selectors ) which control various aspects of the component. While coding on the other project I had a thought.  Instead of directly setting the controls IconCss, which is reserved for font "glyphs", maybe I could override one of the selectors an replace a background element setting with my icon.  If there is any addition documentation available it would be fantast.  My focus is the " e- " css selectors which allow us, developers to customize.  My chase down the blazor trail, has led me to several of the "doc" pages (https://blazor.syncfusion.com/documentation).    I know it is hard, but any chance I get some more broad scope per component, besides the rather lite samples, which are great, but the focus as is Blazor is CSS.With the icons in the sceenshot of the app,  I was able to craft just the right  CSS,  which I allowed me to plug the images you see in the screen shot..  Now the top right "Profile" is a SFMenu, but when I click it, the image gets hidden.  Umm think I will try changing the z-order.. The buttons work perfect.  Anyway. so I got this to work but it took hours of "FireFox".  It has really come together.   Hope u n your family are safe...Thx,Tom