Investigate making the Toggle Button component (not Icon Toggle!) about material-components-web HOT 8 OPEN

Is it decided what will be the class name for such element?

from material-components-web.

Those decisions won't be made until the component is actively being worked on.

from material-components-web.

Couldn't Find an Icon/Fab Button

It looks like this is still open and I figured out a reasonably simple work around. Hopefully this will help anyone in the mean time.

Create MdcButton

You can create an mdc-button:

<button class="mdc-button">
  shopping_cart
</button>

Add Classes to MdcButton and Material Icon

Add whatever button classes you desire. Then add the following two classes (material-icons, icon-color):

<button class="mdc-button mdc-ripple--upgraded material-icons icon-color">
  shopping_cart
</button>

color-icon is just CSS to color the icon to match. If you just use material-icons it will be black and if you use material-icons or material-icons__menu the padding will be off.

Add Color Icon CSS Class

I added color this way and took out the before and after highlighting. You can customize as you see fit here:

.icon-color {
  color: $yourColor;
}
.icon-button, .icon-button::before, .icon-button::after {
  background-color: rgba(0, 0, 0, 0)
}

I don't know if this will help anyone, but hopefully it does.

from material-components-web.

@histamineblkr would you mind linking to a code pen? The .mdc-button overrides the font styles of .material-icons

from material-components-web.

https://github.com/material-components/material-components-web/tree/master/packages/mdc-icon-toggle

from material-components-web.

Still no implementation ... ? @dessant well that was exactly not the problem... !
I think the ripple effect and button enabled/disabled... are indeed, as the spec says, necessary for "icons butons" so to say. For menu, or language, or other icons used as buttons ! Workarounds using icons are not perfect...

from material-components-web.

Is this still on the roadmap in any way?

According to the official material.io website, this is part of the button component which says it is implemented:
https://material.io/design/components/buttons.html#toggle-button
https://material.io/design/components/buttons.html#implementation
But this does not seem to be the case.

from material-components-web.

For what it's worth, Angular Material has a Button Toggle group that handles single/multi selects: https://material.angular.io/components/button-toggle/

I think long-term, they're trying to utilize MDC: https://github.com/angular/components/projects/25

Granted, they could always just utilize the icon-button and keep the group logic in Angular.

It'd be nice to have an official MDC implementation for sites not using Angular.

from material-components-web.