Step-by-step guide for adding an icon to the corner of a Material UI button

Is there a way to position an icon in the corner of a Material UI button in React?

Currently, I have the icon next to the title but I would like to move it to the lower right corner of the button. Any suggestions on how to achieve this? Thank you!

export default function CardButton() {
    return (
        <Button
            variant="contained"
            style={{
                height: 220,
                width: 275,
                margin: '1vh',
            }}
            color="secondary"
        >
            <Typography variant="button" style={{fontSize:'24px'}}>title</Typography>
            <AddIcon/>
        </Button>
    )
}

https://i.sstatic.net/lJgkv.png

javascripthtmlcssreactjsmaterial-ui

Answer №2

Custom Button Component Example

<MyButton
    variant="contained"
    color="primary"
    fullWidth
    endIcon={<img src={your Icon source } />}
    className={classes.button}
  >
    Click Me
  </MyButton>

CSS Styles for Button Container

export const useStyles = makeStyles((theme) => ({
  buttonContainer: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: "10px 20px",
    backgroundColor: theme.palette.primary.button,
    width: "500px",
    margin: "20px",
    outline: "none",
    border: "none",
    borderRadius: "6px",
  },
}));

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

What are some ways to increase the width of a TextField input?

Check out the code snippet below: <Grid container spacing={0} direction="column" alignItems="center" justify="center" style={{ minHeight: "100vh" }} > <FormControl> <TextField label="email" fullWidth type= ...

reactjsmaterial-ui

Create a never-ending jQuery script that is simple and straightforward

My WordPress website features an accordion element that usually functions well by toggling classes when tabs are clicked. However, there is one issue where clicking on a tab does not automatically close other opened tabs. To address this, I added the follo ...

javascriptjquery

module 'next/router' cannot be located or its associated type declarations are missing

Running into some issues with my NextJS application. An unusual error message is appearing, even though my code is functioning smoothly without any errors. import { useRouter } from 'next/router'; // Cannot find module 'next/router' or ...

javascripttypescriptnext.js

I received an undefined value from the Jest snapshot

Today, I embarked on my first journey into writing Jest testing files and found myself facing doubts and errors. I decided to create a headers.test.js file as my testing file and after running the command, I was pleased to see the output in the terminal s ...

reactjsjestjsenzymebabel-jest

The appearance of the page varies between Ubuntu and Windows 7 when viewed on Firefox 31

This situation is completely new to me: The page I designed appears differently on Firefox 31 in Ubuntu (correct): compared to Windows 7 (wrong): I was able to replicate this issue on another Windows 7 machine using FF 31. My HTML and CSS both validate w ...

htmlcss

Tips for creating a responsive background image that adjusts after resizing the window to a certain width

Is there a way to create a responsive background-image that adjusts when the window is resized to a specific width, similar to the main image on ? ...

javascriptjquerycsshtmlresponsive-design

Creating a div resizing function using only JavaScript is a fun and useful project to tackle

Seeking help to create a div resizer using only pure JavaScript as jQuery is restricted. The current functionality works, but breaks when the position of the slider-div is not set to absolute. Any solutions to fix this issue would be greatly appreciated. ...

javascripthtmlcss

At what point does the chaining of async/await come to an end?

I was experimenting with node-fetch and encountered a question while using async / await: Do I need to make my function async if I use await in it? But then, since my function is async, I need to await it and make the parent function async. And so on... He ...

javascriptnode.jsasynchronousasync-awaitnode-fetch

Ways to Retrieve HTML Snippet from Handler Request and Load it into a String

I'm encountering an issue with my ASP.NET MVC application. I'm attempting to retrieve the following HTML snippet from a Handler in a separate ASP.NET project, within one of my controllers, in order to display it in a View: <br /> <div i ...

htmlasp.net-mvccode-snippets

Trouble pausing CSS slide using -webkit-animation-play-state:paused; finding it ineffective

Below is the code snippet in question: .picTransition .item { position: absolute; left: 0; right: 0; opacity: 0; -webkit-animation: picTransition 56s linear infinite; -moz-animation: picTransition 56s linear infinite; -ms-animation: ...

htmlcssanimationhoverslide

Navigating through Dynamic URL Parameters with RouterLink in an Angular Application

Within my Angular 2 application, there exists a tab section where users can choose from a collection of separate yet contextually connected components. By clicking on one of these links, the corresponding component is loaded based on the routerLink definit ...

javascriptangulartypescriptrouterlink

What is the method for ensuring a p element is only as wide as necessary when it wraps within a parent div with a specified hardcoded width?

Is there a way to adjust the width of the p-element in my example below based on the text inside without affecting the normal line break behavior, using only CSS if possible? It appears to be ignoring wrapping and is too wide: https://i.stack.imgur.com ...

htmlcss

Display a placeholder page during the processing of an asynchronous task by Express JS

Perhaps this issue is either too simple to be overlooked or too complex to tackle, but despite my efforts of over 3 hours searching for a solution, I am unable to find one. It seems like it should be a common problem and I am just too inexperienced to loca ...

javascriptnode.jsexpressasync-await

Responsive design and column alignment dilemma

I'm attempting to create a layout using Bootstrap 3.2.0 with tiled divs in a single row for screens wider than 768px. The divs have heights of either 50px or 100px, controlled by the classes "home-height-single" and "home-height-double," and widths ad ...

htmlcsstwitter-bootstraptwitter-bootstrap-3css-float

Tips for converting a "callback pyramid" into a promise-based structure

I'm currently struggling with understanding how to refactor my code to use promises or the Q library effectively. Let's consider a common basic example: I have a test case that imports the same file twice into a MongoDB database and then checks ...

javascriptnode.jsmongodbqshould.js

Why isn't the length of the Array changing when using React's useState hook

I am facing a challenge trying to understand why the value of inputElementArray.length consistently remains 0 when accessed within the useEffect method. function view() { const [inputElementArray, setInputElementArray] = useState<HTMLInputElement[]& ...

javascriptreactjs

Encountered a TypeError in React 16.7: The function (0, _react.useState) is not recognized

Error: TypeError: (0 , _react.useState) is not a function React versions currently being used: "react": "^16.7", "react-dom": "^16.7", File src/App.js: import {memo, useState} from 'react' export default memo(() => { useS ...

javascriptreactjsreact-hooks

What are the best ways to combine, organize, and iterate through JavaScript objects?

When I run a loop, it returns a combination of integer values and objects as shown below: 2 {firstName:"John", lastName:"Doe", age:28, eyeColor:"blue"} 3 {firstName:"Jane", lastName:"Doe", age:22, eyeColor:"brown"} 1 {firstName:"Jack", lastName:"Doe", age ...

javascript

I am struggling to decide which attribute to use for implementing image swap on mouseover() and mouseout()

I have a problem using jQuery to switch between images when hovering on and off. Here's the code snippet I'm working with: HTML <img class="commentImg" src="images/comments.png" data-swap="images/comment_hover.png" alt=""> jQuery $(" ...

javascriptjqueryhtmlcssattr

Highlighting an Element Using Selenium Webdriver at Specific Coordinates

I'm currently in the process of automating a web application built with HTML5 using Selenium Webdriver. I need help figuring out how to highlight the exact coordinates where I have clicked on the Canvas element. For example, if I click on the Canvas a ...

javascriptseleniumautomation