Introduction to Material UI Icons In React

We said it before and we’ll say it again: there are no small things in web development. And what is a better example of a small thing in web Apps than icons? Have you ever used an elevator with walls fully covered with ads? If you had no problem figuring out where to press to start moving, it means someone did a good job of designing the thing. Picture that situation and you’ll have an idea of how tricky interactive element design is. Those elements are meant to stand out just enough to be easy to find but not to the point where they would pull attention away from everything else. 

Likewise, icons are a big part of a web App’s design. In fact, if we measure each element’s impact on user experience per pixel of screen space, icons might be the most important part of the front-end. Today we’ll focus on using Material UI icons in React.

What is Material UI

Material UI is a React library based on Google’s Material Design. Google introduced Material Design in 2014 and has since encouraged developers to use their guidelines. The benefits are smoother integration with Google services and a well-received “Googly” look that so many have grown to like. As you can assume, Material UI library combines the pluses of Material Design with those of React. Those pluses include broad compatibility, easy development, and the ability to remove unnecessary features. The latter comes in handy since many frameworks tend to weigh the application down, and “shaking off” what you’re not using negates that to an extent. Keep reading about Material UI icons and you’ll know:

What Is Material UI Icons and How to Use Them

To put it bluntly, 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 the 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.

Where does React fit in?

“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 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 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. First and foremost, install the Material UI framework to work with 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 catalog. 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 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 catalog, 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 the 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. Your specific 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 a reference to 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-users experience with it.

About Flatlogic Platform

In this article, we’ve talked about Material UI icons and how to use them in React. Icons are an integral part of what differentiates your website from competitors. They take up a small portion of the website’s face but command a great deal of the user’s attention. If you want to create your Apps by hand, this guide will help you a great deal. If saving time is of greater priority to you than individual design, there’s another path you could choose.

Creating web Applications with Flatlogic

Some Apps have unique, unpopular functionality we have to craft by hand. But those Apps are as rare and unique as the functions they perform. Most apps have more similarities than differences. Most web Apps’ basic functions are Creating, Reading, Updating, and Deleting Data. Just like the basic functions, many components and parts of an App can be categorized and replicated. We followed this line of thought and built the Flatlogic Platform to help you create React Apps without hiring a whole team of developers, and with little to no special expertise. App creation with Flatlogic consists of a few choices. Let’s see what they are!

#1: Choose a name

Pick a name for your project. This will help you know which project is which if you start another one.

First off, you choose a name for your project. If you have to create another project soon, you’ll need to differentiate between the two, so choose wisely!

#2: Choose stack

A web App's stack is the combination of technologies used for the front-end, the back-end, and the database.

A complete App consists of the database, the front-end, and the back-end that mediates between the two. We choose the underlying technologies for each part. Any combination will work fine but depending on the resources your App will operate with, some options might have additional benefits. So, a quick research of what works well with React, Vue, or another option you choose will do you good.

#3: Choose the Design

Choose the admin panel's design. Take a look at the selection of design patterns and pick the one you like the most.

If you’re creating an admin dashboard, the visual part may be of lower priority than other parts. Still, you’ll likely look at the panel for hours on end, so choose carefully! It might have a heavy impact on your productivity.

#4: Choose Database Schema

The schema is the structure of your database. It defines fields, columns, types of data, and the way they interact with each other.

We can visualize a database’s structure as a spreadsheet. Except a spreadsheet has two dimensions with lines and columns crossing to represent a field with two distinct parameters. If we were to picture databases similarly, some would have three or even more dimensions, each one representing a relevant parameter. The parameters we need, the type of data they consist of, and how they relate to each other are the things that comprise a database schema. This part is perhaps the trickiest since it requires a thorough understanding of the data your App will process.

#5: Review and Generate

Review your choices. If everything is the way you want it to be, hit "Create App". After a brief compilation your App will be ready.

The choices have been made. It’s time to check them and (assuming everything’s in place) hit “Create App” After compiling for a while (usually a few minutes), your Application will be complete. At this point, you can connect it to your API’s data endpoints and use it. You can push it to GitHub or host it without outside services, both in one click. Enjoy!

Conclusion

Icons are small parts of an App by the screen space they occupy but not by their importance. They help us navigate the interface without spending time reading. They help project an idea or a vision in a clear and concise form. Material UI icons are easy to integrate into React, customize, and shape to your needs. It makes Material UI Icons a must-try for any project development.

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

You might also like these articles