Get list of icons from css file to use inside Angular 6 component
I'm in an Angular 6 application. I often have to create dropdowns that allow choosing custom icons from a specific file custom-icons.css.
For example:
TS:
@Component({
selector: "my-component",
templateUrl: "./my-component.component.html",
styleUrls: ["./my-component.component.scss"],
})
export class IconDialogComponent implements OnInit {
icons = [
"icon-up",
"icon-down",
"icon-left",
//and 100 more icons
]
constructor() {}
ngOnInit() {}
HTML:
<div class="icon-container" *ngFor="let li of icons">
<div>
<i [ngClass]="[li]"> //this is to show icon
<span class="icon-text"> {{ li }} </span> //this is to show the label for the icon
</i>
</div>
</div>
Now, I think that it is not a best practice to re-write every time all the icons in every component, where I have this kind of dropdown.
For example, if the icons in custom-icons.css change, the lists in the components will not be automatically updated.
I'm not sure what to do. Maybe a script to run somehow that pick all classes from the file css could be a solution, but then I don't know how to use it inside an Angular Component.
Any suggestion will be much appreciated.
angular css3 icons
edited Nov 12 '18 at 14:11
Eren ÇELİK
676
asked Nov 12 '18 at 14:06
E.TiakeE.Tiake
275
add a comment |
I'm in an Angular 6 application. I often have to create dropdowns that allow choosing custom icons from a specific file custom-icons.css.
For example:
TS:
@Component({
selector: "my-component",
templateUrl: "./my-component.component.html",
styleUrls: ["./my-component.component.scss"],
})
export class IconDialogComponent implements OnInit {
icons = [
"icon-up",
"icon-down",
"icon-left",
//and 100 more icons
]
constructor() {}
ngOnInit() {}
HTML:
<div class="icon-container" *ngFor="let li of icons">
<div>
<i [ngClass]="[li]"> //this is to show icon
<span class="icon-text"> {{ li }} </span> //this is to show the label for the icon
</i>
</div>
</div>
Now, I think that it is not a best practice to re-write every time all the icons in every component, where I have this kind of dropdown.
For example, if the icons in custom-icons.css change, the lists in the components will not be automatically updated.
I'm not sure what to do. Maybe a script to run somehow that pick all classes from the file css could be a solution, but then I don't know how to use it inside an Angular Component.
Any suggestion will be much appreciated.
angular css3 icons
edited Nov 12 '18 at 14:11
Eren ÇELİK
676
asked Nov 12 '18 at 14:06
E.TiakeE.Tiake
275
add a comment |
I'm in an Angular 6 application. I often have to create dropdowns that allow choosing custom icons from a specific file custom-icons.css.
For example:
TS:
@Component({
selector: "my-component",
templateUrl: "./my-component.component.html",
styleUrls: ["./my-component.component.scss"],
})
export class IconDialogComponent implements OnInit {
icons = [
"icon-up",
"icon-down",
"icon-left",
//and 100 more icons
]
constructor() {}
ngOnInit() {}
HTML:
<div class="icon-container" *ngFor="let li of icons">
<div>
<i [ngClass]="[li]"> //this is to show icon
<span class="icon-text"> {{ li }} </span> //this is to show the label for the icon
</i>
</div>
</div>
Now, I think that it is not a best practice to re-write every time all the icons in every component, where I have this kind of dropdown.
For example, if the icons in custom-icons.css change, the lists in the components will not be automatically updated.
I'm not sure what to do. Maybe a script to run somehow that pick all classes from the file css could be a solution, but then I don't know how to use it inside an Angular Component.
Any suggestion will be much appreciated.
angular css3 icons
edited Nov 12 '18 at 14:11
Eren ÇELİK
676
asked Nov 12 '18 at 14:06
E.TiakeE.Tiake
275
I'm in an Angular 6 application. I often have to create dropdowns that allow choosing custom icons from a specific file custom-icons.css.
For example:
TS:
@Component({
selector: "my-component",
templateUrl: "./my-component.component.html",
styleUrls: ["./my-component.component.scss"],
})
export class IconDialogComponent implements OnInit {
icons = [
"icon-up",
"icon-down",
"icon-left",
//and 100 more icons
]
constructor() {}
ngOnInit() {}
HTML:
<div class="icon-container" *ngFor="let li of icons">
<div>
<i [ngClass]="[li]"> //this is to show icon
<span class="icon-text"> {{ li }} </span> //this is to show the label for the icon
</i>
</div>
</div>
Now, I think that it is not a best practice to re-write every time all the icons in every component, where I have this kind of dropdown.
For example, if the icons in custom-icons.css change, the lists in the components will not be automatically updated.
I'm not sure what to do. Maybe a script to run somehow that pick all classes from the file css could be a solution, but then I don't know how to use it inside an Angular Component.
Any suggestion will be much appreciated.
angular css3 icons
angular css3 icons
edited Nov 12 '18 at 14:11
Eren ÇELİK
676
asked Nov 12 '18 at 14:06
E.TiakeE.Tiake
275
edited Nov 12 '18 at 14:11
Eren ÇELİK
676
asked Nov 12 '18 at 14:06
E.TiakeE.Tiake
275
edited Nov 12 '18 at 14:11
Eren ÇELİK
676
edited Nov 12 '18 at 14:11
Eren ÇELİK
676
edited Nov 12 '18 at 14:11
Eren ÇELİK
676
676
asked Nov 12 '18 at 14:06
E.TiakeE.Tiake
275
asked Nov 12 '18 at 14:06
E.TiakeE.Tiake
275
asked Nov 12 '18 at 14:06
E.TiakeE.Tiake
275
275
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
my friend, you need to use a service.
https://angular.io/tutorial/toh-pt4
answered Nov 12 '18 at 15:39
JP TorrellasJP Torrellas
61
Hi, thank you for the reply. A service can sure help me, but then what I don't know is how to access the css file to get all classes inside that service.
– E.Tiake
Nov 12 '18 at 16:16
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53263843%2fget-list-of-icons-from-css-file-to-use-inside-angular-6-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
my friend, you need to use a service.
https://angular.io/tutorial/toh-pt4
answered Nov 12 '18 at 15:39
JP TorrellasJP Torrellas
61
Hi, thank you for the reply. A service can sure help me, but then what I don't know is how to access the css file to get all classes inside that service.
– E.Tiake
Nov 12 '18 at 16:16
add a comment |
my friend, you need to use a service.
https://angular.io/tutorial/toh-pt4
answered Nov 12 '18 at 15:39
JP TorrellasJP Torrellas
61
Hi, thank you for the reply. A service can sure help me, but then what I don't know is how to access the css file to get all classes inside that service.
– E.Tiake
Nov 12 '18 at 16:16
add a comment |
my friend, you need to use a service.
https://angular.io/tutorial/toh-pt4
answered Nov 12 '18 at 15:39
JP TorrellasJP Torrellas
61
my friend, you need to use a service.
https://angular.io/tutorial/toh-pt4
answered Nov 12 '18 at 15:39
JP TorrellasJP Torrellas
61
answered Nov 12 '18 at 15:39
JP TorrellasJP Torrellas
61
answered Nov 12 '18 at 15:39
JP TorrellasJP Torrellas
61
answered Nov 12 '18 at 15:39
JP TorrellasJP Torrellas
61
61
Hi, thank you for the reply. A service can sure help me, but then what I don't know is how to access the css file to get all classes inside that service.
– E.Tiake
Nov 12 '18 at 16:16
add a comment |
Hi, thank you for the reply. A service can sure help me, but then what I don't know is how to access the css file to get all classes inside that service.
– E.Tiake
Nov 12 '18 at 16:16
Hi, thank you for the reply. A service can sure help me, but then what I don't know is how to access the css file to get all classes inside that service.
– E.Tiake
Nov 12 '18 at 16:16
Hi, thank you for the reply. A service can sure help me, but then what I don't know is how to access the css file to get all classes inside that service.
– E.Tiake
Nov 12 '18 at 16:16
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53263843%2fget-list-of-icons-from-css-file-to-use-inside-angular-6-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
