feat(button): Support icon in button

[yeelan0319]

Related to #991

Codepen Demo

Dev server: 1281-dot-mdc-web-dev.xxxx.com

[googlebot]

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for the commit author(s). If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.
In order to pass this check, please resolve this problem and have the pull request author add another comment and the bot will run again.

[codecov-io]

Codecov Report

Merging #1281 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff           @@
##           master   #1281   +/-   ##
======================================
  Coverage    99.9%   99.9%           
======================================
  Files          69      69           
  Lines        3314    3314           
  Branches      409     409           
======================================
  Hits         3311    3311           
  Misses          3       3

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 648f985...7ebee64. Read the comment docs.

[kfranqueiro]

Given that we're documenting this, it probably makes sense to also include it in the demo page.

(I think we initially discussed possibly not including a demo of it, but based on a discussion I just had with Lynn, we feel like we should include one.)

[kfranqueiro]

I'm not sure why this line was moved in this PR, but it will no longer exist the next time you merge with master anyway. The styles have been split out, so now the ones for this demo are in button.scss.

[yeelan0319]

I will rebase this PR on #1285 .

To address your question though, this line introduced a funny bug. We defined mdc-button__icon in button.scss, which is sourced as part of material-component-web.css in demo.scss. However, we added "Material+Icons" stylesheet below that to introduce material-icon. The latter introduced a font-size: 24px that override what we provided in demo.scss(button.scss) and that's the reason why I moved it to the bottom because we definitely don't want a general library to override our own styles.

It shouldn't be a concern any longer after I rebased it.

[kfranqueiro]

We wanted to keep link last since it's the only one that doesn't get disabled with the checkbox at the top of the demo page, right?

[yeelan0319]

I don't hold a strong opinion here, but this is a reasonable ask since that looks cleaner. Will move it.

[kfranqueiro]

These icons don't actually look like they're vertically centered; their tops align with the text, but they look like they're extending below the baseline, which is going to look awkward at least with all-caps text like our buttons typically have. I'm not sure what the design goal is here though - technically right now I think our button text vertical placement is centered disregarding anything hanging below the baseline.

Also, I'm wondering how this will interact with dense button, or is it not intended to ever be combined with that?

[yeelan0319]

Align with center is a reasonable assumption. Let me see if I could address this. The problem here is the button text is 14px (and 13px for dense button). However, the targeted icon side is 16px. I was not sure about the intention and may check with design tomorrow in the sign off.

[kfranqueiro]

LGTM. I also verified in Edge by merging #1302 into this locally.

[yeelan0319]

Thanks for checking it! I will wait a bit for CI to finish...