Support icons in buttons OOTB?

[ejoubaud]

Dropping an icon in a mui button doesn't look great, it takes some tinkering:

// using react version
<Button color="primary"><i class="material-icons">done</i>Submit</Button>

gives you:

I was able to fix it somewhat with something like this (inspired by materalize-css' handling):

.mui-btn-icon-left {
  line-height: inherit;
  margin-right: 10px;
  margin-left: -5px;
  float: left;
}

<Button color="primary"><i class="material-icons mui-btn-icon-left">done</i>Submit</Button>

I'm not saying mui should come with its own icons library (#245 seems to reject that) but it would be great if there was an included/endorsed/generic way/helper for dropping icons from such a lib into a button so that it just works. This is the kind of common boilerplates we use a CSS lib to avoid.

[ejoubaud]

PS: In case this doesn't make it into the core, those looking for a more Reacty solution can achieve it this way with, e.g., styled-components:

import React from 'react';
import styled from 'styled-components';

const Icon = ({ icon, className }) => (
  <i className={`material-icons ${className}`}>{icon}</i>
);

const LeftIcon = styled(Icon)`
  line-height: inherit;
  font-size: 1.3rem;
  margin-right: 15px;
  margin-left: -5px;
  float: left;
`;

<Button color="primary"><LeftIcon icon="done" />Submit</Button>

[amorey]

Thanks for creating this issue. Let me do some research on it before responding.