top of page

Custom Font Icon with Material UI

There are several methods to use SVG's as an icon in your project. One of the effective methods is to use icons as fonts, you can learn it from here, For most of the project, I have used this method only. In this blog, we will see another way to use custom icons in projects with material UI. For this, I will be going using React material UI library.


Extract icons from designs:

Extract icons as SVG's from designs. or you and download it from any icon library (flat icon) Icon can be of different sizes. In particular, this issue is faced in one of my projects where the designer has used font icons from different sources. It will look something like this :

We need to standardize these icons, we can use a frame of 24 * 24 (which material uses for all icons) and one by one we can align the icons to the centre and after doing all the efforts, now all icons will look like this:

I have also changed the colour of the icons to black, although it doesn't matter much, because we are going to remove them in later steps. I personally use Figma to maintain icons and also to create new ones. You can learn more about creating icons in Figma from here (Link 1 and Link 2).

Once the above step is done now you can extract all SVG's from Figma.


Importing SVG's to project code:

You can create an icon constant file in your project. Now open SVG's one by one in a text editor and copy-paste path (only) in icon constant file. You need to remove fill and other unwanted attributes from the path tag. if there are multiple paths you can group them inside a <g> tag.


Using Material SvgIcon API to render predefined icons from the constant file.


To summarise, there are many methods to use custom icons in your project. I find this method effective when you are using the material UI library in your project. Using SvgIcon API for custom icons, we can take most benefits of the material UI.




88 views0 comments

Recent Posts

See All

Comments


bottom of page