feat(mat-icon): Dinamically add a css class in the html replicating the ligature text for webfont #23183
Labels
area: material/icon
feature
This issue represents a new feature or feature request rather than a bug or bug fix
P4
A relatively minor issue that is not relevant to core functions
Comments
ivan-saorin
added
feature
|
See #23195 for a proposal to solve both this issue and the search engine issue at once. |
crisbeto
added
area: material/icon
P4
PowerKiKi
added a commit
to PowerKiKi/material2
that referenced
this issue
Mar 11, 2022
The new way to use ligature icons, via a dedicated attribute, allow to hide the font name from search engine results. Otherwise the font name, which was never intended to be read by any end-users, would appear in the middle of legit sentences in search results, thus making the search result very confusingto read. New recommended usage is: ```diff - <mat-icon>my-icon-name</mat-icon> + <mat-icon icon="my-icon-name"></mat-icon> ``` Fixes angular#23195 Fixes angular#23183 Fixes google/material-design-icons#498
PowerKiKi
added a commit
to PowerKiKi/material2
that referenced
this issue
Mar 11, 2022
The new way to use ligature icons, via a dedicated attribute, allow to hide the font name from search engine results. Otherwise the font name, which was never intended to be read by any end-users, would appear in the middle of legit sentences in search results, thus making the search result very confusingto read. New recommended usage is: ```diff - <mat-icon>my-icon-name</mat-icon> + <mat-icon icon="my-icon-name"></mat-icon> ``` Fixes angular#23195 Fixes angular#23183 Fixes google/material-design-icons#498
PowerKiKi
added a commit
to PowerKiKi/material2
that referenced
this issue
Mar 11, 2022
The new way to use ligature icons, via a dedicated attribute, allow to hide the font name from search engine results. Otherwise the font name, which was never intended to be read by any end-users, would appear in the middle of legit sentences in search results, thus making the search result very confusingto read. New recommended usage is: ```diff - <mat-icon>my-icon-name</mat-icon> + <mat-icon icon="my-icon-name"></mat-icon> ``` Fixes angular#23195 Fixes angular#23183 Fixes google/material-design-icons#498
|
Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends. Find more details about Angular's feature request process in our documentation. |
|
Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage. We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package. You can find more details about the feature request process in our documentation. |
PowerKiKi
added a commit
to PowerKiKi/material2
that referenced
this issue
Apr 1, 2022
The new way to use ligature icons, via a dedicated attribute, allows to hide the font name from search engine results. Otherwise the font name, which was never intended to be read by any end-users, would appear in the middle of legit sentences in search results, thus making the search result very confusing to read. New recommended usage is: ```diff - <mat-icon>my-icon-name</mat-icon> + <mat-icon icon="my-icon-name"></mat-icon> ``` Fixes angular#23195 Fixes angular#23183 Fixes google/material-design-icons#498
PowerKiKi
added a commit
to PowerKiKi/material2
that referenced
this issue
Apr 1, 2022
The new way to use ligature icons, via a dedicated attribute, allows to hide the font name from search engine results. Otherwise the font name, which was never intended to be read by any end-users, would appear in the middle of legit sentences in search results, thus making the search result very confusing to read. New recommended usage is: ```diff - <mat-icon>my-icon-name</mat-icon> + <mat-icon icon="my-icon-name"></mat-icon> ``` Fixes angular#23195 Fixes angular#23183 Fixes google/material-design-icons#498
PowerKiKi
added a commit
to PowerKiKi/material2
that referenced
this issue
Apr 1, 2022
The new way to use ligature icons, via a dedicated attribute, allows to hide the font name from search engine results. Otherwise the font name, which was never intended to be read by any end-users, would appear in the middle of legit sentences in search results, thus making the search result very confusing to read. New recommended usage is: ```diff - <mat-icon>my-icon-name</mat-icon> + <mat-icon icon="my-icon-name"></mat-icon> ``` Fixes angular#23195 Fixes angular#23183 Fixes google/material-design-icons#498
PowerKiKi
added a commit
to PowerKiKi/material2
that referenced
this issue
Apr 1, 2022
The new way to use ligature icons, via a dedicated attribute, allows to hide the font name from search engine results. Otherwise the font name, which was never intended to be read by any end-users, would appear in the middle of legit sentences in search results, thus making the search result very confusing to read. New recommended usage is: ```diff - <mat-icon>my-icon-name</mat-icon> + <mat-icon icon="my-icon-name"></mat-icon> ``` Fixes angular#23195 Fixes angular#23183 Fixes google/material-design-icons#498
PowerKiKi
added a commit
to PowerKiKi/material2
that referenced
this issue
Apr 2, 2022
The new way to use ligature icons, via the `fontIcon` attribute, allows to hide
the font name from search engine results. Otherwise, the font name, which was
never intended to be read by any end-users, would appear in the middle of legit
sentences in search results, thus making the search result very confusing to read.
New recommended usage is:
```diff
- <mat-icon>home</mat-icon>
+ <mat-icon fontIcon="home"></mat-icon>
```
To also enable this for custom font, include the special `ligature-font` class
when registering the font alias. So like this:
```ts
iconRegistry.registerFontClassAlias('f1', 'font1 ligature-font');
```
And use like this:
```html
<mat-icon fontSet="f1" fontIcon="home"></mat-icon>
```
Fixes angular#23195
Fixes angular#23183
Fixes google/material-design-icons#498
PowerKiKi
added a commit
to PowerKiKi/material2
that referenced
this issue
Apr 2, 2022
The new way to use ligature icons, via the `fontIcon` attribute, allows to hide
the font name from search engine results. Otherwise, the font name, which was
never intended to be read by any end-users, would appear in the middle of legit
sentences in search results, thus making the search result very confusing to read.
New recommended usage is:
```diff
- <mat-icon>home</mat-icon>
+ <mat-icon fontIcon="home"></mat-icon>
```
To also enable this for custom font, include the special `mat-ligature-font` class
when registering the font alias. So like this:
```ts
iconRegistry.registerFontClassAlias('f1', 'font1 mat-ligature-font');
```
And use like this:
```html
<mat-icon fontSet="f1" fontIcon="home"></mat-icon>
```
Fixes angular#23195
Fixes angular#23183
Fixes google/material-design-icons#498
PowerKiKi
added a commit
to PowerKiKi/material2
that referenced
this issue
Apr 2, 2022
The new way to use ligature icons, via the `fontIcon` attribute, allows to hide
the font name from search engine results. Otherwise, the font name, which was
never intended to be read by any end-users, would appear in the middle of legit
sentences in search results, thus making the search result very confusing to read.
New recommended usage is:
```diff
- <mat-icon>home</mat-icon>
+ <mat-icon fontIcon="home"></mat-icon>
```
To also enable this for custom font, include the special `mat-ligature-font` class
when registering the font alias. So like this:
```ts
iconRegistry.registerFontClassAlias('f1', 'font1 mat-ligature-font');
```
And use like this:
```html
<mat-icon fontSet="f1" fontIcon="home"></mat-icon>
```
Fixes angular#23195
Fixes angular#23183
Fixes google/material-design-icons#498
PowerKiKi
added a commit
to PowerKiKi/material2
that referenced
this issue
Apr 2, 2022
The new way to use ligature icons, via the `fontIcon` attribute, allows to hide
the font name from search engine results. Otherwise, the font name, which was
never intended to be read by any end-users, would appear in the middle of legit
sentences in search results, thus making the search result very confusing to read.
New recommended usage is:
```diff
- <mat-icon>home</mat-icon>
+ <mat-icon fontIcon="home"></mat-icon>
```
To also enable this for custom font, include the special `mat-ligature-font` class
when registering the font alias. So like this:
```ts
iconRegistry.registerFontClassAlias('f1', 'font1 mat-ligature-font');
```
And use like this:
```html
<mat-icon fontSet="f1" fontIcon="home"></mat-icon>
```
Fixes angular#23195
Fixes angular#23183
Fixes google/material-design-icons#498
andrewseguin
pushed a commit
that referenced
this issue
Jun 27, 2022
The new way to use ligature icons, via the `fontIcon` attribute, allows to hide
the font name from search engine results. Otherwise, the font name, which was
never intended to be read by any end-users, would appear in the middle of legit
sentences in search results, thus making the search result very confusing to read.
New recommended usage is:
```diff
- <mat-icon>home</mat-icon>
+ <mat-icon fontIcon="home"></mat-icon>
```
To also enable this for custom font, include the special `mat-ligature-font` class
when registering the font alias. So like this:
```ts
iconRegistry.registerFontClassAlias('f1', 'font1 mat-ligature-font');
```
And use like this:
```html
<mat-icon fontSet="f1" fontIcon="home"></mat-icon>
```
Fixes #23195
Fixes #23183
Fixes google/material-design-icons#498
andrewseguin
pushed a commit
that referenced
this issue
Jun 27, 2022
The new way to use ligature icons, via the `fontIcon` attribute, allows to hide
the font name from search engine results. Otherwise, the font name, which was
never intended to be read by any end-users, would appear in the middle of legit
sentences in search results, thus making the search result very confusing to read.
New recommended usage is:
```diff
- <mat-icon>home</mat-icon>
+ <mat-icon fontIcon="home"></mat-icon>
```
To also enable this for custom font, include the special `mat-ligature-font` class
when registering the font alias. So like this:
```ts
iconRegistry.registerFontClassAlias('f1', 'font1 mat-ligature-font');
```
And use like this:
```html
<mat-icon fontSet="f1" fontIcon="home"></mat-icon>
```
Fixes #23195
Fixes #23183
Fixes google/material-design-icons#498
(cherry picked from commit b37c96d)
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Feature Description
It would be nice that the
mat-iconwould add to the generated html a css class replicating Its text.E.g.
<mat-icon>edit</mat-icon>--><mat-icon class="md-edit">edit</mat-icon>This would allows to target the element via css to further customize the element.
Use Case
Let's imagine we just installed a library via
npm iwith a custom component that usemat-icon(via web-font) internally to display an icon. In our application we would like to customize that icon due to internal company rules.As far as I have understood there is no way to achieve that result via css. And as we are talking about a compiled component we don't control, we cannot change It to use svg instead.
The feature proposal would allow some override through css.
The text was updated successfully, but these errors were encountered: