Components: stepper dependency on material icons

[janisp]

Bug, feature request, or proposal:

bug

What is the expected behavior?

Texts are not printed on the screen instead of the icons if the icon set is not present.

Brownie points:
I can set up another icons from another icon sets (e.g. FontAwesome)

What is the current behavior?

stepper component has the dependency on material icons. If material icons are not used, it's rendered as text on the screen.

What are the steps to reproduce?

Index.html line 24 adds the necessary icons. If that line is commented out, icons will faill and text is printed on screen instead of icon.
Plunker template: https://plnkr.co/edit/n4ry3CkDsvV22aX4h5lo?p=preview

What is the use-case or motivation for changing an existing behavior?

I want to use FontAwesome icons (and I don't want to bundle the Material icons just for this one component)

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material 2.0.0-beta.11
Angular 4.4.3

Is there anything else we should know?

Thanks for the Stepper component!

[jlkeiper]

I would be okay with a svgIcon input, or a way to inject a template to be used in place of the icon.

[sam-lex]

or an option to keep the numbers (no icon change).

[josehernandezv]

Any news on this?

[dfront]

you can set [completed]="false" on md-step and you will have only numbers instead of icons!!

[josehernandezv]

But that would make every step look like incompleted (with the gray color), even the ones already completed.

[sam-lex]

I was a bit reluctant on trying [completed]="false" suggested by @dfront, after reading that it would make it look like uncompleted. But it's actually not that bad 😅

of course, it would've been better if it could be colored, since I'm using linear mode.

[xaviervansteene]

to replace the word "create" with the pen icon you need to add the google material font icon link <link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">

[ssgriffen]

Would someone mind please posting an example of overriding the create icon that shows for an editable step on the material 2 stepper. I've been struggling for hours trying to follow the docs and can't make it work so far @crisbeto

[cfremgen]

@ssgriffen

Here's .scss version:

::ng-deep mat-step-header {
    &:nth-of-type(2) {
        .mat-step-icon {
            * {
                display: none;
            }

            &:after {
                content: "1";
            }
        }
    }
}

[ssgriffen]

@cfremgen I appreciate the example. However I am looking to only override the 'edit' icon when the step is in the edit state. The docs show a way to do this somwthing like this below

 <mat-horizontal-stepper>
 +      <ng-template matStepperIcon="edit">Custom edit</ng-template>
 +      <ng-template matStepperIcon="done">Custom done</ng-template>
 +
 +      <mat-step>Content 1</mat-step>
 +      <mat-step>Content 2</mat-step>
 +      <mat-step>Content 3</mat-step>
 +    </mat-horizontal-stepper>

but I haven't had success in implementing yet... @cfremgen @crisbeto

[cfremgen]

I believe this is the commit you'll need https://github.com/crisbeto/material2/commit/8cc1aff709452044e332efb6ebb71f1030fc747c

But it's not in release yet.

Better off waiting until this is in release, but if you need to you should be able to use my example as a starting point and only override if edit styles are applied. I am not sure though, I haven't encountered the exact scenario you're talking about.

[ssgriffen]

@cfremgen okay, thank you, I didn't notice it wasnt released yet

[sevdashubham]

any update on this?

[invingagan1]

is any one has example to use svg-icon in mat-icon for stepper.

[fableplay13]

with this I overwrite the material font:

button,select,html,textarea,input,md-bottom-sheet .md-subheader,.md-chips { font-family: Roboto, "Helvetica Neue", sans-serif; } *:not(.material-icons):not(.fa):not(b):not(strong) { font-family: $fontstandard !important; }

with this I overwrite the contents of the icons with the font custom:

::ng-deep mat-step-header { &:nth-of-type(1) { counter-reset: step-counter; } position: relative; .mat-step-icon { * { display: none; } &:after { content: counter(step-counter); counter-increment: step-counter; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } }

this works for my case also on IE11

[anandbabud1987]

you can set [completed]="false" on md-step and you will have only numbers instead of icons!!

this worked like charm

[Rouhollah]

probably you use another font-family instead default.
you can solve this issue with fix 'Material Icon' for font-family in pages that use stepper.

:host /deep/ .material-icons {
  font-family: 'Material Icons' !important;
}

[vksingh225]

to replace the word "create" with the pen icon you need to add the google material font icon link <link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">

I think this is the best solution to utilize. Bcoz setting completed = "false" doesn't gives a nice UX.

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