mikepenz

Android-Iconics

Android-Iconics - Use any icon font, or vector (.svg) as drawable in your application.
Under Apache License 2.0
By mikepenz

java android material-ui material material-components material-design android-development android-library mikepenz compose icon-font fontawesome android-icon material-icons google-material weather-icons foundation-icons meteocons google-material-icons android-compose

Android-Iconics

... allows to include any icon font with all its vector icons in your project. No limits. Scale with no limit, use any color at any time, provide a contour, and many additional customizations...


What's included ? •
Setup ? •
Migration Guide ? •
WIKI / FAQ ? •
Custom Font ? •
Sample App

What's included ?


Already available fonts
- Google Material Design Icons
- Material Design Iconic Font
- Fontawesome
- Meteocons
- Octicons
- Community Material
- Weather Icons
- Typeicons
- Entypo
- Devicon
- Foundation Icons
- Ionicons
- Material Design DX
- Pixeden 7 Stroke
- Phosphor
- Or create your own font with any icon needed.


Setup
Latest releases ?

1. Provide the gradle dependency

gradle
dependencies {
//the core iconics library (without any widgets)
implementation "com.mikepenz:iconics-core:${latestAndroidIconicsRelease}"
implementation "androidx.appcompat:appcompat:${versions.appCompat}"
}


1b. (optional) Add the view's dependency

gradle
//this adds all ui view widgets (IconicsButton, IconicsImageView, ...)
implementation "com.mikepenz:iconics-views:${latestAndroidIconicsRelease}"


2. Choose your desired fonts

Note: Fonts ending with -kotlin require at least v4.x of Android-Iconics
Note: v5.1.x or newer requires the latest font versions



gradle
implementation 'com.mikepenz:google-material-typeface:[email protected]'
implementation 'com.mikepenz:google-material-typeface-{outlined|rounded|sharp}:[email protected]'
implementation 'com.mikepenz:material-design-iconic-typeface:[email protected]'
implementation 'com.mikepenz:fontawesome-typeface:[email protected]'
implementation 'com.mikepenz:octicons-typeface:[email protected]'
implementation 'com.mikepenz:meteocons-typeface:[email protected]'
implementation 'com.mikepenz:community-material-typeface:[email protected]' // note 5.3.45.1 alphabetically sorts, and merges in 3 sections
implementation 'com.mikepenz:weather-icons-typeface:[email protected]'
implementation 'com.mikepenz:typeicons-typeface:[email protected]'
implementation 'com.mikepenz:entypo-typeface:[email protected]'
implementation 'com.mikepenz:devicon-typeface:[email protected]'
implementation 'com.mikepenz:foundation-icons-typeface:[email protected]'
implementation 'com.mikepenz:ionicons-typeface:[email protected]'
implementation 'com.mikepenz:pixeden-7-stroke-typeface:[email protected]'
implementation 'com.mikepenz:material-design-icons-dx-typeface:[email protected]'
implementation 'com.mikepenz:phosphor-typeface:[email protected]'


Usage
Use as drawable

kotlin
IconicsDrawable(this, FontAwesome.Icon.faw_android).apply {
colorInt = Color.RED
sizeDp = 24
}


Use via XML

If you use the Iconics library via XML provide the icon you want to use in the following syntax: gmd-favorite --> fontId-iconName. A list of the
available fonts and their fontId can be found here.
All icon names from the default fonts can be found via the DEMO application.


Notation within text

Use the { icon-definer } syntax
gson
Some great text with a {faw-android} font awesome icon and {met-wind} meteocons icons.


Drawable XML (API 24+)

Specify the drawable in your drawable folder.


xml
<com.mikepenz.iconics.IconicsDrawable
xmlns:app="http://schemas.android.com/apk/res-auto"
app:ico_icon="gmd_favorite"
app:ico_color="#0000FF"
app:ico_contour_width="1dp"
app:ico_contour_color="#00FFFF"
app:ico_size="24dp" />
// all custom theming attributes supported


Use like any normal drawable in your application.
This feature was suggested and initially provided by @dzamlo


Custom Views
As IconicsImageView

xml
<com.mikepenz.iconics.view.IconicsImageView
android:layout_width="72dp"
android:layout_height="72dp"
app:iiv_color="@android:color/holo_red_dark"
app:iiv_icon="gmd-favorite" /> // or @string/gmd_favorite with our generator
//app:iiv_size="12dp"
//app:iiv_padding="2dp"
//app:iiv_contour_color="#FF0000"
//app:iiv_contour_width="2dp"
//app:iiv_background_color="#FFFF00"
//app:iiv_corner_radius="2dp"
//app:iiv_background_contour_color="#FF0000"
//app:iiv_background_contour_width="1dp"
//app:iiv_shadow_radius="4dp"
//app:iiv_shadow_dx="1dp"
//app:iiv_shadow_dy="1dp"
//app:iiv_animations="spin|blink_alpha|blink_scale"


As IconicsTextView

xml
<com.mikepenz.iconics.view.IconicsTextView
android:text="abc{hif-test}defgh{faw-adjust}ijk{fon-test1}lmnopqrstuv{fon-test2}wxyz"
android:textColor="@android:color/black"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:textSize="16sp"/>


As IconicsButton

xml
<com.mikepenz.iconics.view.IconicsButton
android:text="{faw-adjust} Button"
android:layout_width="120dp"
android:layout_height="60dp"/>


Compose

To include the experimental compose support in your project add the following dependency to your project (since v5.2.0)


gradle
implementation "com.mikepenz:iconics-compose:${latestAndroidIconicsRelease}"


Use the provided Image wrapper and set the icon.


kotlin
Image(
GoogleMaterial.Icon.gmd_access_alarm,
colorFilter = ColorFilter.tint(MaterialTheme.colors.primary),
)


Screenshots


Available fonts

|Link|Prefix|Dependency|
|---|---|---|
|Google Material Design Icons ORIGINAL by Google|gmd,gmo,gmr,gms|implementation 'com.mikepenz:google-material-typeface{-outlined,rounded,sharp}:[email protected]'|
|Material Design Iconic Font Google Material Iconic|gmi|implementation 'com.mikepenz:material-design-iconic-typeface:[email protected]'|
|Fontawesome|faw|implementation 'com.mikepenz:fontawesome-typeface:[email protected]'|
|FontawesomeBrand|fab|implementation 'com.mikepenz:fontawesome-typeface:[email protected]'|
|FontawesomeRegular|far|implementation 'com.mikepenz:fontawesome-typeface:[email protected]'|
|Meteocons|met|implementation 'com.mikepenz:meteocons-typeface:[email protected]'|
|Octicons|oct|implementation 'com.mikepenz:octicons-typeface:[email protected]'|
|Community Material|cmd|implementation 'com.mikepenz:community-material-typeface:[email protected]'|
|Weather Icons|wic|implementation 'com.mikepenz:weather-icons-typeface:[email protected]'|
|Typeicons|typ|implementation 'com.mikepenz:typeicons-typeface:[email protected]'|
|Entypo|ent|implementation 'com.mikepenz:entypo-typeface:[email protected]'|
|Devicon|dev|implementation 'com.mikepenz:devicon-typeface:[email protected]'|
|Foundation Icons|fou|implementation 'com.mikepenz:foundation-icons-typeface:[email protected]'|
|Ionicons|ion|implementation 'com.mikepenz:ionicons-typeface:[email protected]'|
|Pixden7Stroke|pe7|implementation 'com.mikepenz:pixeden-7-stroke-typeface:[email protected]'|
|Material Design DX|cmf|implementation 'com.mikepenz:material-design-icons-dx-typeface:[email protected]'|
|Phosphor Icons|pho|implementation 'com.mikepenz:phosphor-typeface:[email protected]'|


Licenses for all included fonts are linked inside the class or can be found on the coresponding repositories.


Compatibility Note
appcompat:1.4.x

Appcompat v1.4.x introduces default enabled emoji support into all AppCompat* views, which prevents the IconicsView* views (iconics-views module) from properly applying the spannable style.
To fix this problem, emoji support has to be disabled by doing:


xml
app:emojiCompatEnabled="false"


More information on the appcompat emoji support: https://developer.android.com/jetpack/androidx/releases/appcompat#1.4.0-alpha01


Advanced Usage
Register fonts

If you want to add your own custom font, or a GenericFont you have to register this font (before using it). The best place to do this is the Application.


And initialize Iconics as you wish
```kotlin
class CustomApplication : Application() {
override fun onCreate() {
super.onCreate()


    //register custom fonts like this (or also provide a font definition file)
    Iconics.registerFont(CustomFont())
}

}
```


Advanced IconicsBuilder

Everything is easy and simple. Right? But now you got a single icon within your textview and you need additional styling?
Just define the style for all icons or only a specific one. You can find this in the PlaygroundActivity of the sample too.
kotlin
Iconics.Builder()
.style(ForegroundColorSpan(Color.WHITE), BackgroundColorSpan(Color.BLACK), RelativeSizeSpan(2f))
.styleFor(FontAwesome.Icon.faw_adjust, BackgroundColorSpan(Color.RED))
.on(tv1)
.build()


String icon-key or typeface enum

Sometimes you won't like to use the icon-key ("faw-adjust") like this, but use the enum provided by a specific font. Both is valid:
kotlin
IconicsDrawable(this, "faw-adjust").actionBar()
kotlin
IconicsDrawable(this, FontAwesome.Icon.faw_adjust).apply {
sizeDp = 24
paddingDp = 1
}


Create custom fonts

This is possible with only the .ttf and .css mapping file. And will take you 2 minutes.


You can get these two files by downloading a web icon font, or if you want to create your
own custom icon font from *.svg files then you can use following tools:
* Fontello
* IcoMoon
* Fontastic
* let me know if you find other tools.


After you got those two files, head over to the icon addon creation tool android-iconics.mikepenz.com.
Enter all the information. Add the .ttf and .css and click the button. It will generate and download the icon font addon as
zip. (this tool is local only, no files are sent to a server, you can safely use it with any icons)


String fields for icons

For generating string field for each of icons of your font, you can use this simple generator:
Android-Iconics String Generator


Android module generator

A awesome gradle plugin which can automatically fetch a font from Fontastic, and generate the Android Module for your project.
Iconics-Font-Generator


ProGuard / R8

ProGuard / R8 rules are bundled internally with each font.


Special Contributor

Credits

Developed By

License
Copyright 2021 Mike Penz



Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at



   http://www.apache.org/licenses/LICENSE-2.0



Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.