Components: Icon Toggle [new component request]

[hacknaked]

Would be great to include icon toggles as defined in https://material.io/guidelines/components/buttons.html#buttons-toggle-buttons

MDC has a nice implementation of this
https://material-components-web.appspot.com/icon-toggle.html

[fxck]

https://github.com/angular/material2/tree/master/src/lib/button-toggle#exclusive-selection ?

[hacknaked]

@fxck Yes, maybe an icon toggle can be implemented using exclusive selection button groups, but it seems wired to me (a group with only one element and two level html markup.

I'd prefer something like <md-icon-toggle>my-icon</md-icon-toggle>.

[jmcgoldrick]

How would md-icon-toggle work with different icon fonts etc? I've been doing something like this: http://plnkr.co/edit/zMJc32INjgQru1otxnUo?p=preview which is even nicer using the new NgIfElse

edit: updated plunk

[EladBezalel]

MDC implementation is not following the material design spec (no outlines) -
We do have icon buttons

[hacknaked]

@EladBezalel

MDC implementation is not following the material design spec

Well, It's really wired.

https://material.io/components/ links to https://github.com/material-components/material-components-web#useful-links. If you follow the Demos link you will reach the Icon Toggle demo I've post.

Seems that MDC Icon Toggle was made by the same guys that write Material Design Spec.

[EladBezalel]

Well, https://material.io/components/ is the website for https://github.com/material-components/material-components-web#useful-links.

They're not the same guys and even if they're, if its not in the spec, we won't implement it.

[hacknaked]

@EladBezalel

But, what's the official Material spec?
In your first comment you linked to https://material.io/guidelines

Are you saying that people who write https://material.io/guidelines are not the same that people who implement https://material.io/components? Why both projects share material.io domain if they don't follow the same spect? Sorry, for dumb questions, but it's confusing.

[EladBezalel]

Yes, just as the people that write material.angular.io are not the same as augury.angular.io

[cesartolosa]

I am confused @EladBezalel

MDC implementation is not following the material design spec

I visited the link you shared and Icon toggles is included in the material design spec as part of the Toggle buttons section, so I think that something like <md-icon md-icon-toggles>my_icon</md-icon> would be perfect.

[EladBezalel]

I'm talking about outlining the icon itself, this part is not included in the material design spec.

You can totally have icon buttons as simple as:

<button mdIconButton>
  <md-icon>my_icon</md-icon>
</button>

[cesartolosa]

Ok @EladBezalel, but what about the ripple ink response? The ripple ink boundary seems to be different (out of boundaries) to icon toggles than the regular icon button.

[EladBezalel]

@cesartolosa #3208

[cesartolosa]

@EladBezalel, thanks!!!

[thw0rted]

I know this is super old, but @EladBezalel or others, as far as I can tell there's still no official implementation of "Icon Toggle" from the spec. Yes, you can hack in behavior for a toggle based on mat-icon-button but I'd like to see something as easy to use as mat-checkbox, where toggle state is maintained by the component.

Since icon toggles are in the spec, I would suggest that they should have an example in the docs (and, ideally, easy to use syntax).

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}