Information on how an icon should be rendered. In general, you shouldn't need to interact directly with this type - it should generally only exist in a chain of operations to display an icon.

Adding titles or using masking require that the icon has a unique id. This is because references are made in the HTML via the HTML id attribute, which must be unique on the page. Views with an id will have the WithId type and will therefore work with those options, while ones that have the WithoutId type won't.

Indicates that the presentation has an id, which lets you use titled and masked. For more on why those features are "locked" like this, see the documentation for the View type above.

Indicates that the presentation does not have an id, which means you can't use titled and masked. For more on why those features are "locked" like this, see the documentation for the View type above.

Render the given icon to HTML.

Add the given attributes to the icon's presentation. These will be applied to the icon when viewed. Note the icon is an svg tag, and it appears that using Html.Attribute.class will remove any Svg.Attribute.class values that are set, including FontAwesome ones that make the icon work, so make sure to use Svg.Attribute.class with this.

Due to this taking Svg.Attribute Never you can't use attributes that can produce messages. You can use viewWithAttributes to add such attributes if required.

Add the given transforms to the icon's presentation. These will be applied to the icon when viewed.

Set the HTML id for the icon presentation to the given value. This must be unique on the page.

The FontAwesome JavaScript library generates random ids for this. Doing this in elm is a little more cumbersome, but is possible if you need to dynamically generate items and don't have existing ids to work from. Please see the elm-fontawesome-example repository for an example of this.

Sets the title of the presented icon. This will make the icon semantically meaningful, and as such it won't be hidden from accessibility tools.

Note that this can only be applied where the icon has an id unique on the page as it uses that id under the hood in the HTML. Use withId to add one.

Sets an outer icon that the main icon is masking (i.e.: the initial icon will become a "cut out" of this outer icon). This creates true transparency.

Note that this can only be applied where the icon to be masked has an id unique on the page as it uses that id under the hood in the HTML. Use withId to add one.

The definition of an icon.

You will find these in the modules for the different IconDef packs (e.g: FontAwesome.Solid.Definition). You should never need to define these or change them yourself (but you can to create custom icons).

Generally you want to work with Icon instead, which can be found in the parent packs.

Gets a basic presentation of an icon.

If you do nothing else an pass this to view, the icon will be presented as semantically meaningless (i.e: purely decorative) and will be hidden from accessibility tools. If you need the icon to have semantic meaning then using titled will change that.