feat(stepper): allow for header icons to be customized #7482

crisbeto · 2017-10-02T21:04:35Z

Currently users are locked into using the Material create and done icon for the step headers. These changes add the ability to customize the icons by providing an ng-template with an override.

Fixes #7384.

Note: I'm not too sure about the naming (matStepperIcon vs matStepIcon). I went with matStepperIcon, because it applies to the entire stepper, rather than an individual step.

jelbourn

This is a breaking API change that wasn't on the radar for RC. I'm not sure we are able to swing it, but can do a presubmit to see

jelbourn · 2017-10-29T18:36:02Z

src/lib/stepper/step-header.ts

-  /** Icon for the given step. */
-  @Input() icon: string;
+  /** State of the given step. */
+  @Input() state: string;


From the name I'm not sure that state is meant to be

This component is internal anyway, but it's supposed to mean the state that the header is in (e.g. done, current).

jelbourn · 2017-10-29T18:36:44Z

src/lib/stepper/step-header.ts


  /** Label of the given step. */
  @Input() label: MatStepLabel | string;

+  /** Overrides for the header icons, passed in via the stepper. */
+  @Input() iconOverrides: {[key: string]: TemplateRef<any>};


Why not a map?

It doesn't need to be. It's just a string->TemplateRef map.

jelbourn · 2017-10-29T18:37:35Z

src/lib/stepper/stepper-icon.ts

+ * Template to be used to override the icons inside the step header.
+ */
+@Directive({
+  selector: 'ng-template[matStepperIcon]',


Does this work with

<mat-icon *matStepperIcon>

?

Hmm, I haven't tried it but I suppose.

crisbeto

@jelbourn It's not a breaking API change. It's true that I renamed an input, however it's on the mat-step-header which is only used internally (see https://github.com/angular/material2/blob/master/src/lib/stepper/stepper-horizontal.html).

crisbeto · 2017-10-29T19:16:09Z

src/lib/stepper/step-header.ts


  /** Label of the given step. */
  @Input() label: MatStepLabel | string;

+  /** Overrides for the header icons, passed in via the stepper. */
+  @Input() iconOverrides: {[key: string]: TemplateRef<any>};


It doesn't need to be. It's just a string->TemplateRef map.

crisbeto · 2017-10-29T19:18:13Z

src/lib/stepper/step-header.ts

-  /** Icon for the given step. */
-  @Input() icon: string;
+  /** State of the given step. */
+  @Input() state: string;


This component is internal anyway, but it's supposed to mean the state that the header is in (e.g. done, current).

crisbeto · 2017-10-29T19:18:38Z

src/lib/stepper/stepper-icon.ts

+ * Template to be used to override the icons inside the step header.
+ */
+@Directive({
+  selector: 'ng-template[matStepperIcon]',


Hmm, I haven't tried it but I suppose.

jelbourn · 2017-10-30T20:10:32Z

Ah, I didn't know it was an internal component. I'll leave it to @mmalerba to review, then

AsafAgranat · 2017-11-07T09:54:54Z

Additionally, currently the steppers icons are rendered using the web-font variant. SVG icons (using the svgIcon attribute) should be supported too.

mmalerba

Looks good, needs rebase though

aamir1995 · 2017-12-13T15:12:52Z

Any update on this PR?

ganqqwerty · 2017-12-16T14:53:08Z

so, guys, what are you waiting for? Merge that thing!

Currently users are locked into using the Material `create` and `done` icon for the step headers. These changes add the ability to customize the icons by providing an `ng-template` with an override. Fixes angular#7384.

angular-automatic-lock-bot · 2019-09-08T06:02:03Z

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.}

crisbeto added the pr: needs review label Oct 2, 2017

crisbeto assigned jelbourn Oct 2, 2017

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Oct 2, 2017

crisbeto force-pushed the 7384/stepper-icon-customization branch from c19ecbd to 585023a Compare October 3, 2017 15:16

crisbeto mentioned this pull request Oct 10, 2017

feat(badge): add badge component #7483

Merged

jelbourn assigned mmalerba Oct 29, 2017

jelbourn added the target: major This PR is targeted for the next major release label Oct 29, 2017

jelbourn reviewed Oct 29, 2017

View reviewed changes

crisbeto commented Oct 29, 2017

View reviewed changes

jelbourn removed the target: major This PR is targeted for the next major release label Oct 30, 2017

mmalerba added pr: lgtm and removed pr: needs review labels Nov 13, 2017

mmalerba approved these changes Nov 13, 2017

View reviewed changes

crisbeto force-pushed the 7384/stepper-icon-customization branch 2 times, most recently from aa115f8 to f120014 Compare November 13, 2017 21:42

crisbeto added action: merge The PR is ready for merge by the caretaker and removed pr: needs rebase labels Nov 13, 2017

crisbeto force-pushed the 7384/stepper-icon-customization branch 2 times, most recently from 8fd1dd0 to 8cc1aff Compare November 20, 2017 20:48

crisbeto added the target: minor This PR is targeted for the next minor release label Dec 6, 2017

feat(stepper): allow for header icons to be customized

0515a0b

Currently users are locked into using the Material `create` and `done` icon for the step headers. These changes add the ability to customize the icons by providing an `ng-template` with an override. Fixes angular#7384.

crisbeto force-pushed the 7384/stepper-icon-customization branch from 8cc1aff to 0515a0b Compare January 14, 2018 16:33

tinayuangao merged commit adc251c into angular:master Jan 30, 2018

mmalerba mentioned this pull request Mar 1, 2018

stepper: document new features for 6.0.0 #10224

Closed

2 tasks

rafaelss95 mentioned this pull request Apr 15, 2018

chore: remove class re-export workaround #10863

Merged

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(stepper): allow for header icons to be customized #7482

feat(stepper): allow for header icons to be customized #7482

crisbeto commented Oct 2, 2017

jelbourn left a comment

jelbourn Oct 29, 2017

crisbeto Oct 29, 2017

jelbourn Oct 29, 2017

crisbeto Oct 29, 2017

jelbourn Oct 29, 2017

crisbeto Oct 29, 2017

crisbeto left a comment

crisbeto Oct 29, 2017

crisbeto Oct 29, 2017

crisbeto Oct 29, 2017

jelbourn commented Oct 30, 2017

AsafAgranat commented Nov 7, 2017

mmalerba left a comment

aamir1995 commented Dec 13, 2017

ganqqwerty commented Dec 16, 2017

angular-automatic-lock-bot bot commented Sep 8, 2019

feat(stepper): allow for header icons to be customized #7482

feat(stepper): allow for header icons to be customized #7482

Conversation

crisbeto commented Oct 2, 2017

jelbourn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

crisbeto left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jelbourn commented Oct 30, 2017

AsafAgranat commented Nov 7, 2017

mmalerba left a comment

Choose a reason for hiding this comment

aamir1995 commented Dec 13, 2017

ganqqwerty commented Dec 16, 2017

angular-automatic-lock-bot bot commented Sep 8, 2019