Steps for aligning a custom SVG icon in the middle of a Material-UI IconButton

Looking to create an icon button that resembles this design: https://i.sstatic.net/QCyZO.png

My current progress is as follows: https://i.sstatic.net/NXfm0.png

Below is the code snippet I have been working on:

import { SvgIcon, IconButton } from '@material-ui/core';

import {ReactComponent as homemadePlayIcon} from "./play-icon.svg"

<IconButton onClick={this.playIconButtonClick} disableRipple={true} style={{color: "rgb(0,0,0,0)", width: '35px', height: '35px', backgroundColor: '#f5f5f5', boxShadow: &q...

Is there a way to align the icon in the center of the button?

Appreciate your help, James

cssreactjssvgmaterial-uiicons

Answer №1

After some trial and error, I managed to achieve the desired outcome using @svgr along with the --icon option to maintain the viewbox property of the SVG. The key was integrating the generated component within the IconButton like so:

import { IconButton } from '@material-ui/core';

import PlayIcon from "./icons/PlayIcon.js"

<IconButton onClick={this.playIconButtonClick} disableRipple={true} style={{color: "rgb(0,0,0,0)", width: '35px', height: '35px', backgroundColor: '#f5f5f5', boxShadow: "3px 3px 10px rgba(0, 0, 0, 0.2)"}}>
    <PlayIcon />
</IconButton>

Answer №2

Replace the previous content with this:

<IconButton onClick={this.playIconButtonClick} disableRipple={true} style={{color: "rgb(0,0,0,0)", width: '35px', height: '35px', backgroundColor: '#f5f5f5', boxShadow: "3px 3px 10px rgba(0, 0, 0, 0.2)", display: "flex", justifyContent: "center", alignItems: "center"}}>

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

Encountering a syntax error in a React app while using Material-UI with @withStyles(styles) decorator in ReactJS. The error message reads: "Unexpected token >

As someone who is new to React, I embarked on a project that involves material-ui. To my delight, the project runs smoothly on codesandbox. Visit Project on CodeSandbox However, when attempting to run it locally, an error reared its head at this particul ...

reactjsmaterial-ui

Console is displaying a Next.js error related to the file path _next/data/QPTTgJmZl2jVsyHQ_IfQH/blog/post/21/.json

I keep getting an error in the console on my Next.js website. GET https://example.com/_next/data/QPTTgJmZl2jVsyHQ_IfQH/blog/post/21/.json net::ERR_ABORTED 404 I'm puzzled as to why this is happening. Could it be that I'm mishandling the router? ...

javascriptreactjsnext.jsssg

When I click on a link to redirect it, I am confronted with a bizarre rectangle that

When attempting to create redirects using images, I encountered a small issue. Take a look at this screenshot: https://i.sstatic.net/LgStu.pnghttps://i.sstatic.net/eEnNB.png This is the item in question: <p><div><a title="Home" hr ...

htmlcss

In Angular, a white screen may suddenly appear if the scrolling speed is too fast

My experience has been primarily on Chrome. I've noticed that when I scroll for a long time, the data on the screen disappears briefly and then reappears after a few seconds. Is there a resolution for this problem? Thank you, ...

javascripthtmlcssangulartypescript

Fundamental CSS Selector

I'm encountering an issue with CSS selectors while using Foundation 5: I am having trouble selecting the desired element, which seems strange to me. The specific problem I am facing is related to changing the background-color of the "Right Button Act ...

htmlcsscss-selectorszurb-foundation

What is the best way to connect a CSS file to a jade document?

Having some trouble linking normalize.css while using socket and express. html head title= "Real time web chat" link(href='/css/normalize.css') script(src='/chat.js') ...

cssnode.jsexpresspug

Generate a fresh Date/Time by combining individual Date and Time components

I have set up a form to gather dates from one input box and times from another. var appointment_date = new Date(); var appointment_start = new Date("Mon Apr 24 2017 20:00:00 GMT-0400 (EDT)"); var appointment_end = new Date("Mon Apr 24 2017 21:30:00 GMT- ...

javascriptdatereactjsdatetime

Always ensure that the horizontal scrollbar is visible without the need for vertical scrolling

I'm attempting to create a data grid-style layout where the left side is fixed and only the right side is scrollable. However, the entire div needs to be vertically scrollable. The concept is functioning correctly, but the horizontal scrollbar appears ...

htmlcssflexbox

Div text with superfluous line breaks

Whenever a user clicks the sign-up button ("Cadastrar" in Portuguese) on my website, the newsletter form successfully hides. However, there seems to be unnecessary line breaks in the success message. Why is this happening? I am trying to make sure that th ...

htmlcss

Is it feasible to utilize the /index.html file in the Dotnet React Template?

When using the pure Create React Application (without dotnet), there are two ways to open the react application after running yarn start: https://localhost:3000/ https://localhost:3000/index.html https://i.sstatic.net/J0oPkm.png https://i.sstatic.net/8um ...

c#reactjs.netasp.net-mvcprogressive-web-apps

Change the width of <p> element to control the number of lines visible on the screen

Is there a way to adjust the width of specific paragraph elements so they automatically have two lines with the same width? Even when the text is longer, the width should adjust to ensure both lines are equal in length (with the last line not wider than t ...

jquerycsswidthparagraph

Are you looking to receive specific and organized pages of data from DynamoDB?

In my react-native project, I am utilizing DynamoDB along with NodeJS on the server-side. The table in question has a primary key of 'hashtag' and a sort key of 'timestamp'. hashtag | timestamp blabla | 1 blabla | 2 blabla | 3 bla ...

javascriptnode.jsreactjsamazon-web-servicesamazon-dynamodb

What disparities exist between utilizing Arial Black font and regular Arial font with the <Strong> tag?

Despite setting my text to Arial Black, it appears as regular text on Firefox. To workaround this issue, I tried using the Arial font with the Strong tag but couldn't notice any visual difference. Should I be concerned about this discrepancy? Thank y ...

htmlcssfonts

Encountered a snag with the getStaticProps() function in my Next.js project

I encountered an issue with my Next.js project: Error: page / getStaticProps cannot be attached to a page's component and must be exported from the page. More information can be found here: https://nextjs.org/docs/messages/gssp-component-member I sim ...

reactjsnext.js

Alert: Fiber Caution in React-Native

Out of the blue, my react-native app is now showing me a warning message that says: WARNING Unable to locate Fiber with id "21847" Can anybody explain what this means and suggest how I can resolve it? ...

reactjsreact-nativereact-three-fiber

Flashing issues when utilizing the Jquery ui slider within an Angular 2 component

I recently incorporated a jquery-ui slider plugin into an angular 2 component and it's been working well overall, but I have encountered an annoying issue. Whenever the slider is used, there is a flickering effect on the screen. Interestingly, when I ...

csshtmljquery-uitypescriptangular

Navigating through the complexities of handling an unspecified value retrieved from an API in React

When retrieving an id from one api to use as a variable in another api, there may be cases where the id is not always returned in the first fetch. In such instances, it is necessary to gracefully handle the situation by assigning a static id or implementin ...

javascriptreactjs

What is the most effective approach for integrating an edit feature into my React component?

For a while now, I've been working on a Reviews react app and have encountered an issue. Each Review can have only one ReviewResponse, but I need to implement functionality for editing the response. Currently, the response form is hidden once a review ...

javascriptreactjsstatereact-forms

Switching the arrow direction in Bootstrap 4 menu toggles

I'm a beginner with Bootstrap 4. My navigation menu includes a dropdown item with the standard caret pointing down, added automatically by Bootstrap. Now, I want to make the caret point up after opening the dropdown menu for the nav item. Despite ext ...

jquerycsstwitter-bootstrapbootstrap-4caret

Shifting between classes in jQuery only takes effect after scrolling occurs

There seems to be an issue with the transition effect in my jQuery code that changes the background color of the .navbar upon scrolling. Even though it is supposed to start with a transparent background, it always begins with a yellow background. I have fo ...

jquerycsstwitter-bootstrapbootstrap-4