0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

LWC:Write different type of icon-name

Last updated at Posted at 2024-02-04

different type of icon-name in LWC

html
<template>
    <p>Utility Icons</p>
    <lightning-card title="close" icon-name = "utility:close">
    </lightning-card>
    <lightning-card title="chevronright" icon-name = "utility:chevronright">
    </lightning-card>
    <p>Doctype Icons</p>
    <lightning-card title="ai" icon-name = "doctype:ai">
    </lightning-card>
    <lightning-card title="link" icon-name = "doctype:link">
    </lightning-card>
    <p>Standard Icon</p>
    <lightning-card title="account" icon-name = "standard:account">
    </lightning-card>
    <lightning-card title="action_list_component" icon-name = "standard:action_list_component">
    </lightning-card>
    <p>Custom Icon</p>
    <lightning-card title="custom1" icon-name = "custom:custom1">
    </lightning-card>
    <lightning-card title="custom2" icon-name = "custom:custom2">
    </lightning-card>
</template>

その結果
image.png

もっとたくさんの画像を書きのURLを参照してください。
公式参考URL:
https://www.lightningdesignsystem.com/icons/#doctype

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?