docs(stepper): add guide for creating a custom stepper based on cdk-stepper

[Mayocampo]

Bug, feature request, or proposal:

Feature-Request

What is the expected behavior?

There must be an easy way to change styles of step headers: change colors, change fonts, change icons, change position of labels

What is the current behavior?

As far as i know, we get stuck with a default confguration. I already check a lot of issues here regarding to those topics, but i didn't understand if things are corrected or if there's a way to acomplish this

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

Every project has an specific group of styling rules. Component should cover that. (mantaining guidelines from material specs, obviously)

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

@angular/cli: 1.4.9
node: 6.11.3
os: win32 x64
@angular/animations: 4.4.6
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

[andrewseguin]

Check out the theming guide at https://material.angular.io/guide/theming-your-components

It includes colors, fonts, etc. Other than those you are welcome to customize the CSS as you wish. Is there a set of styles that aren't feasible for you to override?

[sainture]

Yes, need to change the step-header icon when the step is complete. Currently, it changes to "create" icon but I would like to change it to "done" (and still keeping it editable).

[Mayocampo]

@andrewseguin i understand that i can change some styles using the theming guide... but if i need to change the icon of the steps or put the label below of it and not beside, how can i change that?... now, i really dont understand how to customize CSS for it... i mean, if i change styles inside node_modules, when i publish the app to server, those styles are lost cause server (Azure) runs a fresh npm install every time.... now, if i include a custom CSS in my component (styleUrls:['myCustomCss.scss']),e styles are not taken and the original ones are always used..... so, i guess i'm losing something here.... thank you in advance if you can hep me

[mmalerba]

We have added the ability to swap out the icons. If you're trying to do something that's significantly different in appearance from a normal mat-stepper, you probably want to build a new component on top of the cdk-stepper instead (this is exactly what mat-stepper does.

See:
cdk-stepper
mat-stepper - as an example of how to build on cdk-stepper

This could really use some better documentation, probably in the form of a guide on the docs site. Will re-purpose this issue for that.

@Mayocampo any luck with this?

[nicholas-davis]

+1