Skip to content

Icon documentation should demonstrate using <svg> and automatic theming #16511

Open
@andrewseguin

Description

@andrewseguin

Documentation Feedback

It's not clear from the icon documentation that <mat-icon> is a good use case for wrapping an <svg> icon for the sake of theming. Does not require registering the icon with the registry

https://stackblitz.com/edit/angular-rtrkyi?file=app/icon-svg-example.html

<mat-icon color="primary">
  <svg width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
</mat-icon>

Affected documentation page: https://material.angular.io/components/icon/overview

Metadata

Metadata

Assignees

No one assigned

    Labels

    P4A relatively minor issue that is not relevant to core functionsarea: material.angular.ioarea: material/icondocsThis issue is related to documentation

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions