Incorporating a Material UI Icon into a FontIcon Material-UI element within a React application

I am attempting to showcase a Material-UI Icon using a React Material-UI FontIcon component. Here is my code: 

<FontIcon className="material-icons"/> 
    Help 
</FontIcon>

Instead of displaying the icon on the screen, only text is shown.

The specific Icon I am trying to use is the Help icon from the icon collection at https://material.io/icons/. The icon library has been successfully installed. As per instructions provided at http://www.material-ui.com/#/components/font-icon, it should work by following these steps:

If the icon font supports ligatures, reference the font in the className and enclose the icon name in the FontIcon tag. Despite installing the library as instructed, I am facing issues with its functionality. Can someone guide me through the correct implementation process?

Could someone please clarify the correct method for implementing this?

reactjsmaterial-designmaterial-ui

Answer №1

After reviewing the provided link, it emphasizes the importance of referencing the public font in the code.

<FontIcon className="material-icons" style={iconStyles}>home</FontIcon>

One option is to download the icons using npm:

npm install material-design-icons

Alternatively, you can add the following code to the head section of your main html file for easy access:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">

In your specific scenario, it should be as follows:

<FontIcon className="material-icons">help</FontIcon>

It's worth noting that I used the lowercase version of help instead of Help for the icon name.

I tend to believe that the self-closing tag 

<FontIcon className="material-icons" />
was a mistake; it should not have the slash since it has a closing </FontIcon> tag.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on building a multi-page application using Vue or React

I find myself a bit confused when it comes to single-page applications versus multi-page applications. While I am aware of the difference between the two, I am struggling with creating a MPA specifically. Up until now, I have built various apps using Rea ...

javascriptreactjsvue.jssingle-page-applicationmulti-page-application

Register when a user signs up or buys a product from stripe's subscription service

Currently, I am in the process of developing an application that allows public users to access a pricing page and choose a plan (utilizing stripe for subscription payments). Once a user selects a plan and proceeds to checkout, my aim is to have them redi ...

node.jsreactjsnext.jsstripe-payments

What steps can be taken to ensure MUI styling is applied properly, even if it is being overridden by a global setting

I am currently in the process of developing a React Component that functions as a quiz and will be incorporated into a third-party website owned by a client. Since I do not have control over the styling of their website, I am facing limitations in terms of ...

material-ui

MUI Styles malfunctioning upon initial load or hard reload, yet functioning properly upon normal reload in NextJS

Prelude After struggling with this issue for about a week, I have tried numerous solutions to solve it without any luck. It seems like the server is not rendering my styles properly in the Next.js environment, despite trying the recommended fixes. Materi ...

reactjsnext.jsmaterial-ui

Utilizing an early release of Material-UI in a React web application with extensive content is essential when beta features are required for long-term success

When deciding whether to use a beta version of Material-UI for a long-term React web application with extensive content, consider if the beta features are necessary and if adhering to Google's Material Design Guidelines is essential. While alternativ ...

reactjsweb-applicationsfrontendmaterial-uibeta

Adding a tab panel is causing the page not to render properly, but when there is no tab panel code, the page renders correctly

function TabPanel(props: TabPanelProps) { const { children, value, index, ...other } = props; return ( <div role="tabpanel" hidden={value !== index} id={`simple-tabpanel-${index}`} ...

reactjsmaterial-ui

Retrieving innerHTML with React Hooks

Currently, I am working on creating a questionnaire that consists of multiple input fields. The user's responses are displayed at the bottom in a paragraph form: function App() { const divRef = useRef(null) const [ food, setFood ] = useState(&apos ...

reactjsreact-hooks

The symbol `'.'` is giving a error message of not being recognized as an internal or external command, operable program, or batch file when using React

Attempting to initiate a project from gitlab, I encountered an error when running npm start: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="add9dec880cbdfc2c3d9ed9d839c839d">[email protected]</a> start npm run re ...

reactjsnpmcmdpackage.jsonnpm-start

Retrieving information from the API and displaying it is a time-consuming process

navigation links import { v4 as uuid } from "uuid"; import Link from "next/link"; import { getAllCategories } from "src/utils/api"; export default async function NavLinks() { const {data: categories} = await getAllCategorie ...

reactjsperformancenext.jsfetchfetching-strategy

Issue with uploading files upon clicking the button in Material-UI V1 ReactJs

Having trouble with uploading files when using Material-UI/Button click. <Button dense containerElement="label" label="label"> <input style={{display: 'none'}} type="file" /> </Butto ...

reactjsfile-uploadmaterial-ui

What is the process for importing a jquery plugin like turnjs into a React component?

After searching through countless posts on stackoverflow, it seems like there is no solution to my problem yet. So... I would like to integrate the following: into my react COMPONENT. -I attempted using the script tag in the html file, but react does no ...

javascriptjqueryreactjs

Getting the ID of an element in ReactJS following a POST request

I am looking to implement a function that creates an entry in a database using data collected from a basic form. Once the user clicks on submit, this function is triggered: createItem(item){ this.state.bucket_list.push({ name: item, ...

reactjsexpress

Using Redux to retrieve external key values in order to associate them with card components

After implementing include functionality for foreign keys in my backend API controller, the values are now being fetched into my Redux store, where I intend to use them. However, I am facing challenges in accessing these values when attempting to map them ...

reactjsreduxreact-reduxmaterial-ui

Trying out a particular MaterialUI Icon for compatibility

Can you test for specific Material UI icons, such as ArrowLeft or ArrowRight, instead of relying on .MuiSvgIcon-root? Code snippet from the App component: return {open ? <ArrowLeft/> :<ArrowRight/>} RTL Testing : The following tests are passi ...

reactjsjestjsmaterial-uireact-testing-library

The property "state" of RouteComponentProps location does not exist in the provided type {}

We recently encountered a new error that was not present before. Previously, our code compiled without any issues and the compilation process went smoothly. However, individuals who installed the react application from scratch are now facing an error speci ...

reactjstypescriptreact-router

Is there a way to customize the font size of Material UI Autocomplete?

I'm currently trying to customize the Material UI Autocomplete component with my own CSS. Specifically, I aim to adjust the font size of the input field. Below is my current implementation: <Autocomplete style={{ width: 200, height: 60, ...

cssreactjsmaterial-ui

What is the best way to retrieve the value from a Material UI textfield after hitting the enter key

Having trouble retrieving input values with the provided code. Attempted using onKeyUp, onKeyDown, and onKeyPress, but none of them returned the value as desired. Typically, I would use the onChange property to get the value, but it triggers for every ne ...

reactjstypescriptmaterial-ui

How I am able to access this.state in React without the need for binding or arrow functions

Understanding the concept of arrow functions inheriting the parent context is crucial in React development. Consider this React component example: import React, { Component } from 'react'; import { View, Text } from 'react-native'; i ...

javascriptreactjsreact-nativeecmascript-6arrow-functions

The dynamic categorization feature in Redux Form

My approach with Redux Form involves dynamically populating the subcategories in a select field based on the category selected by the user. I accomplished this by creating an API for fetching all categories, triggering an action to load these categories in ...

reactjsreduxredux-form

Issue: Unable to locate module 'js-yaml' while executing npm start command

Unable to locate module 'js-yaml' Require stack: D:\REACT NATIVE\portfolio\node_modules\cosmiconfig\dist\loaders.js D:\REACT NATIVE\portfolio\node_modules\cosmiconfig\dist\createExplore ...

javascriptnode.jsreactjsreact-nativenpm