score:0
same problem here, this is what i did.
import linkicon from '@material-ui/icons/link';
import styled from 'styled-components';
...
const resolve = styled.div`
display: flex;
vertical-align: middle,
`;
<resolve>
<linkicon style={{ marginright: '5px' }} />
<p>resolve</p>
</resolve>
if you aren't happy with mui default link icon you can always diy:
{/* this is the same chained icon used in the own material-ui,
idk why this ins't avaiable yet */}
function customlinkicon(props) {
return (
<svgicon {...props}>
<path d="m4 9h1v1h4c-1.5 0-3-1.69-3-3.5s2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25v8.59c.58-.45 1-1.27 1-2.09c10 5.22 8.98 4 8 4h4c-.98 0-2 1.22-2 2.5s3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5s13.98 12 13 12h9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09v6.25c-1.09.53-2 1.84-2 3.25c6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5s14.5 6 13 6z" />
</svgicon>
);
}
...
<resolve>
<customlinkicon
{/* adjust margin top if needed */}
style={{ marginright: '3px', margintop: '3px' }} {
/>
<p>resolve</p>
</resolve>
score:0
the best option is to use it like that :
import {box, typography} from '@material-ui/core'
import linkicon from '@material-ui/icons/linkicon';
........
<box display='flex' alignitems='center'>
<linkicon classname={classes.linkicon} />
<typography variant='h5'>
resolve
</typography>
</box>
score:0
with this solution the icon will inherit your typography, it prevents having to re-write the style when changin
<typography component={stack} direction="row" alignitems="center" color="secondary">
<editicon fontsize="inherit" sx={{ marginright: 1 }} />
edit
</typography>
score:3
you can import these on top
import { grid, typography } from "@material-ui/core";
import linkicon from "@material-ui/icons/link";
you can use
<grid style={{ display: "flex" }}>
<linkicon />
<typography>revolve</typography>
</grid>
sample sandbox example here
score:4
having listitemicon
and listitemtext
wrapped inside a listitem
will keep it in one line and prevent breaking:
import listitem from '@material-ui/core/listitem';
import listitemicon from '@material-ui/core/listitemicon';
import listitemtext from '@material-ui/core/listitemtext';
<listitem >
<listitemicon><accessalarmicon color="secondary" /></listitemicon>
<listitemtext>updated 1 hour ago</listitemtext>
</listitem>
demo image:
score:4
you can also use material ui's flexbox component.
for example:
// ...
import { box } from '@material-ui/core';
// ...
<box alignitems="center" display="flex">
<box>
<linkicon classname={classes.linkicon} />
</box>
<box>
revolve
</box>
</box>
the alignitems: center
attribute will vertically align the inner items.
this will add some additional markup. however, if you look at the component's api there's a lot of additional flexibility. such as for example a method to use margin or padding that's consistent with the rest of your material ui implementation. also it's really easy to align the items differently if the use-case should occur.
score:6
styles
const styles = theme => ({
icon: {
position: "relative",
top: theme.spacing.unit,
width: theme.typography.display1.fontsize,
height: theme.typography.display1.fontsize
}
});
jsx
<typography variant="display1">
<icon classname={this.props.classes.icon}/>your text
</typography>
you could replace display1
with display3
or another typography variant in all 3 places to choose your text size. the
ensures that your text doesn't break between words when it wraps.
for me this can render to look like this
with display3
and a few other styles added for color.
score:11
this can be easily achieved in mui v5 by using a stack
and set alignitems
prop to center
:
import stack from '@mui/material/stack';
import typography from '@mui/material/typography';
import addcircleicon from '@mui/icons-material/addcircle';
<stack direction="row" alignitems="center" gap={1}>
<addcircleicon />
<typography variant="body1">text</typography>
</stack>
score:18
alternative simple solution
<grid container direction="row" alignitems="center">
<searchicon /> example
</grid>
score:29
try the below code. you can use variant
as per your requirement.
const usestyles = makestyles(theme => ({
wrapicon: {
verticalalign: 'middle',
display: 'inline-flex'
}
}));
<typography variant="subtitle1" classname={classes.wrapicon}>
<linkicon classname={classes.linkicon} /> revolve
</typography>
score:43
you need to use grid. something like that should works:
<grid container direction="row" alignitems="center">
<grid item>
<linkicon classname={classes.linkicon} />
</grid>
<grid item>
revolve
</grid>
</grid>
score:87
this works perfectly!
<div style={{
display: 'flex',
alignitems: 'center',
flexwrap: 'wrap',
}}>
<linkicon />
<span>revolve</span>
</div>
Source: stackoverflow.com
Related Query
- How to align horizontal icon and text in MUI
- How to vertically align icon and text in React?
- How to have different horizontal and vertical spacing in MUI Grid?
- Material ui: How to change DatePicker text and calendar icon color?
- How to pass a icon and text to a button in React?
- React - vertically align text and icon
- How to custom color text and icon in TableSortText component of Material-ui?
- How to align left for Item1 and align right for Item2 & Item3 with MUI React?
- How can I center align Material UI Switch and it's icon props?
- How to show hidden icon and remove text when the button is clicked
- How to separate icon and input type text box and to move the div to the right corner?
- How can I align my text and put the button on the extrem right of my gray bar?
- How do I put these text and icon side by side?
- How to change color of icon and text once clicked or hovering?
- How to make Flexbox work with children when using horizontal MUI Collapse Component and TransitionGroup transitions?
- How could I change mui x-data-grid sorting icon and menu icon color
- How to vertically align button content and the icon in the same line and icon on the extreme right of button in tailwindcss?
- React - How to align text and img in same line
- How can I make a small space here between the icon and text
- How to align bootstrap text and button horizontally
- How do I add an svg icon to Material ui helper text generated by Formik and Yup
- In React JS : How to copy the all text from grid using "Copy All" icon from MUI
- How to align image and text divs side by side in section tag?
- how to align the butto, textfield and text in the center in react?
- Align Image and Text in Horizontal Direction in React
- How to center a component in MUI and make it responsive?
- How to align text input correctly in react native?
- MUI - How to align a component to the center/right?
- MUI and TypeScript: How to use !important?
- MUI - How do you make a horizontal List?
More Query from same tag
- Listing all values of an object's property from JSON file
- disable Appbar paddings from top and bottom
- Functional vs imperative (statements): writing this in the most compact way
- Make a logger for Node Js
- How to require a mountable prop set via reference in React
- Where to mount and unmount inside an Enzyme describe function?
- How to select specific data from my mondoDB dataset
- How do I set a "property" of a HOC?
- Redux Reducer is returning an [Object Object] , However i want string?
- why my map function is not working to display API data on browser?
- Tab interface, having trouble unmounting components
- React children throw PropTypes error
- Trouble with binding event handlers in react
- React-Redux- Delete an item from list
- Refresh on protected Routes React Router with firebase auth
- Is there any React Carousel library support load more (fetch new items from server) when users move to the last item?
- react ComponentDidMount
- I'm getting error using DataGrid Material UI component, it says "Can't resolve '@material-ui/x-license'", why?
- React alternative to transitionTo react-router-dom 4.1.1 transition in function
- How to highlight active nav link on click with Styled components and react-router-dom v6
- Curious behavior of async/await
- substring is counting correct characters but not showing correctly on app
- React: App requests same endpoint multiple times
- React native-env file could not be found within the project
- Join JS String Array and JSX element
- Uncaught Error: Objects are not valid as a React child. when using react-flow-editor
- Custom Loader does not get applied with respect to react-table
- Global utility functions in react? How to implement
- Splice removing option to click checkbox after first click
- How to check if token is undefined for user authentication