How to Use Material UI Icons In React

Introduction in Material UI Icons In React

Hello, Bonjour and Guten Tag to you.

We have said it many times before and we won’t get tired of repeating that there are no small things when developing a project. The reasoning behind this belief we have is that in the modern Digital Age you don’t just sell your product. You also sell experience, convenience and emotion, because modern times constitute the market’s oversaturation with possibilities for a potential customer. That’s why every little thing counts.

That being said, the focus of our today’s article – Material UI Icons, might very easily seem unimportant, but it is most definitely not. Material UI Icons, and particularly in connection to React, are there to help you perfect your project, whether it is a site, an app or anything else, and, thus, perfect your potential client experience, which can lead to the metaphorical scales of their choice weighing in your direction.

Don’t get us wrong, we don’t say that they alone can do it for you. We are talking about them as a part of a whole complex of small things. And we would surely talk about each and every one of them in their own time. But today we focus on React Material UI Icons and only on them in order to do them proper justice. That means looking at:

• What they are;

• How you can use them with React;

• How to import a React Material-UI icon for your project.

 So, without further ado, let’s get to the first and the second points of the upper-mentioned list.

What Is Material UI Icons and How to Use Them

To put it bluntly, a Material UI Icons are a pack of ready-made icons that represents a command, file, device, or directory. They can also be used to represent frequent operations and savings, and are usually placed in application and/or toolbars. Such Icons are used with a purpose of creating an easy shortcut to any action on the site or in the app, as well as allowing to replace long word descriptions with an easily understandable icon for a user. Material UI Icons mainly consist of two components: SvgIcon and Icon.

When it comes to Material UI Icons, the SVG component serves as the SVG path child and converts it into a React component. This React component allows you to customize the icon’s style and the reaction it makes after a click. It should also be mentioned that the size of said Icon should be 24×24 pixels, but we are getting ahead of ourselves. The second component, which is the Icon component, is there to display an icon from any ligature-enabled icon font.

“What does it all have to do with React?” – you might ask. And the answer is quite simple: you can also use them when creating a project with React’s help, which is well and good, because it allows you to keep this task in your line of focus without a need to switch. And there are even no pitfalls, as the pack is ready-made and ready to use. Although, it should be said that Material UI Icons are not a be all and end all of UI Icons, as there are plenty of other packs on the market. So, why choose it? In our opinion, you should choose them, because they are slick, stylish, minimalistic, and are supported by all major platforms, as well as browsers. But the best part is that they were created by Google. And this mastodon of a corporation knows a thing or two about creating site components.

So, there you have it. Now, let’s take a closer look at the process of creating and using said icons in your project.

How to import a React Material UI icon for your project

So, let’s say you are creating a website for your awesome project and you want to make it more colorful, vibrant and, dare we say it, more internationally accessible. That’s where Material UI Icons can come to your rescue, as they tick all of the upper mentioned boxes. So, first of all, here’s a little guide to how you can add the ready-made Material UI Icons into your project.

Step 1. Installing Material UI framework. The first and foremost thing to do is to install Material UI framework in order to be able to work with all of its components. To do so, add one of the following command lines, depending on whether you do it with npm or yarn, into your project:

npm install @material-ui/core

yarn add @material-ui/core

Step 2. Installing Material UI Icons. The next step here would be to install the icons themselves into the project’s catalogue. Once again, there are two ways to do it: through yarn or through npm:

npm install @material-ui/icons

yarn add @material-ui/icons

These components use the Material UI SvgIcon component we have mentioned above to render SVG paths for each and every icon. This, in order, constitutes peer dependency on the next Material-UI release.

Step 3. Importing Material UI Icons. After the installation of the Material UI Icons into your project’s catalogue, your next step would be to import them by using one of the following two methods:

Method #1. This option would be safer than the second one, also it somewhat restricts the creative potential of the developer’s experience:

import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';

import ThreeDRotation from '@material-ui/icons/ThreeDRotation';

Method #2. This option is less safe, but, on the other hand allows an experienced developer more creative freedom:

import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';

By using one of these methods, we’ve imported Access Alarm and 3D Rotation icons into our project and you would be able to see them next time you boot up your project in their default variation. But keep in mind, that all of the icons in Material UI framework have five different variations:

• Filled variation (the default option);
• Outlined variation;
• Rounded variation;
• Twotone variation;
• And Sharp variation.

So, if you want to use any of these variations, you would need to append the theme name to the icon name. Also keep in mind that while Material Design icons use “snake_case” naming, @material-ui/icons use “PascalCase” for the naming.

Step 4. Adding CSS to Material UI Icons to change styles. Let’s assume that your project has its own YouTube channel and you would like to add the link to it to your site. Adding the full link would look rather unfitting on any site, so, using a Material UI icon of YouTube would be a fit here. And let’s also assume that for stylistic reasons you want it to be in red and white, just as the original logo. In that potential situation your next step would be to add CSS to your icon to make it appear the way you need. In that case your next move would be as follows:

import React, { Component } from 'react' import YouTubeIcon from '@material-ui/icons/YouTube'; export class Maticon1 extends Component { render() { return ( <div> <AppBar className="mrg" position="static"> <Toolbar> <div style={{ 'paddingLeft': "600px" }}> Material UI Social media Icons</div> </Toolbar> </AppBar> <YouTubeIcon style={{ 'color': "red" }}/><br></br> </div> ) } } export default Maticon1 

In this example, Maticon1 is the component where we add social media icons. After that, don’t forget to add reference of this component in app.js file by doing the following:

import React from 'react'; import logo from './logo.svg'; import './App.css'; import Maticon1 from './Maticon1' function App() { return ( <div className="App"> <Maticon1/> </div> ); } export default App;

And, the next time you run your project you will see a beautiful small Material UI Icon of YouTube in red and white.

But what if you need an icon that is not in the default set of Material UI Icons? Well, in that case the SvgIcon wrapper we’ve already mentioned above would come to your rescue. It allows you to create custom SVG icons by extending the native <svg> element. Bear in mind that all the SVG elements should be scaled for a 24×24 pixels viewport. This way the resulting icon would be available to use as a child for other Material UI components that themselves use the icons, and would be available for customization with the viewBox attribute. You would also be free to apply any of the theme colors by using the color prop, as by default all the components inherit the current color. The code for customization would look the following way:

function HomeIcon(props) { return ( <SvgIcon {...props}> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /> </SvgIcon> );
} And the code for color setting would look the following way:
· <div className={classes.root}>
<HomeIcon />
<HomeIcon color="primary" />
<HomeIcon color="secondary" />
<HomeIcon color="action" />
<HomeIcon color="disabled" />
<HomeIcon style={{ color: green[500] }} />

And, after adding these lines, your icons would look the following way:

That is how you install and customize your Material UI Icons. Feel free to wield this power to decorate your project with all sorts of beautiful icons and somewhat secretly enrich your end-user’s experience with it.

Conclusions to Have

Coming to the end of this article, we are hoping that we’ve shown you that even the littlest of things are noteworthy in their own right on Material UI Icons example. But the best part about this whole ordeal is the fact that Material UI Icons are not even that small, as they help you project the idea of any of your project. Just like a mosaic that consists of lots and lots of small pieces that create a sight to see when working together.

It should also be mentioned once again that they are just exceptionally easy to integrate, customize and shape to your needs, making Material UI Icons a must-try and, eventually, a go-to for any project development.

And that is all for today. We wish you a very happy day, filled with small pleasant things to enjoy. And, as always, feel free to read up on any other of our articles.

See you in the next article.

You might also like these articles